table怎么限制子级的宽度

2012-09-22

table如何限制子级的宽度有一个div，宽度是750，但是我如果在div下面加一个table的话，table的子就变成800像

table如何限制子级的宽度
有一个div，宽度是750，但是我如果在div下面加一个table的话，table的子就变成800像素宽，这是为什么呢？该怎么写，加了table之后，table的子也是750的宽呢？

这个网址就是问题的贴：http://item.taobao.com/item.htm?id=15938135382

我说的那个div的id就叫J_DivItemDesc

请高手移驾用谷歌浏览器或者火狐，搜下源码帮解决下这个问题，解决到在 id=J_DivItemDesc的子下面添加table tr td 后，里面的p标签的宽度会是750像素宽，不会因为我加了一个table就变成800了。

CSS code

<div class="content" id="J_DivItemDesc"><p><span style="line-height:150.0%;    color:olive;    font-size:24.0pt;    "><span style="font-family:宋体;    ">餐具为</span></span><span style="line-height:150.0%;    font-family:verdana;    color:olive;    font-size:24.0pt;    ">56</span><span style="line-height:150.0%;    color:olive;    font-size:24.0pt;    "><span style="font-family:宋体;    ">头釉中彩的高档骨瓷餐具，没有添加其他的瓷质，确保全骨瓷，除了筷子架是白瓷的其他的全是骨瓷</span></span></p><p><span style="color:#6aa84f;    "><strong><span style="font-family:宋体;    font-size:10.5pt;    ">骨质瓷特点:</span></strong></span></p><p><span style="color:#6aa84f;    "><span style="font-size:10.5pt;    ">骨瓷原称骨灰瓷，人们对＂灰＂字感到不＂雅＂，改称骨瓷．所谓骨瓷，就是骨粉加上石英混合而成的瓷土，质地轻盈，呈奶白色．将瓷器置放在灯光下，可隐隐透光．骨瓷在制作过程中加入动物的骨粉（灰），国际公认骨粉含量超过40%以上的称做优质骨瓷(FINE BONE CHINA)．骨粉用牛、羊、猪骨等......以牛骨为佳．</span></span></p><p><span style="color:#6aa84f;    "><span style="font-size:10.5pt;    ">◆</span><span style="font-size:10.5pt;    ">瓷质细腻：白度柔和、透光性强，呈现出与普通瓷器不一样的质感和亮度，浑身散发着贵族的高贵气质．<br>◆器皿形状规整：画面光亮釉面质感更好．<br>◆保温性好：与传统瓷器相比，骨瓷的保温性更好，喝咖啡或泡茶时有更多感受．<br>◆环保瓷：骨瓷多是低铅或无铅产品．由于是欧美社会的基本保障，在产品质量方面都与欧美看齐．<br>◆强度更好、胎体更薄、比重更轻：由于骨瓷与普通瓷器的成分不同，能够做到更薄更坚韧耐磨，但是由于高温成型比较困难，所以成型是废品率较高，客观上形成价格高等因素。</span></span></p><p><span style="color:#6aa84f;    "><span style="font-size:10.5pt;    "><img align="absMiddle" src="http://img04.taobaocdn.com/imgextra/i4/443262353/T2tC8iXotNXXXXXXXX_!!443262353.jpg"></span></span></p><p><span style="color:#6aa84f;    "><span style="font-size:10.5pt;    "><img align="absMiddle" src="http://img02.taobaocdn.com/imgextra/i2/443262353/T2.UdMXfNbXXXXXXXX_!!443262353.jpg"></span></span></p><p><span style="color:#6aa84f;    "><span style="font-size:10.5pt;    "><img align="absMiddle" src="http://img04.taobaocdn.com/imgextra/i4/443262353/T2fhXNXnhdXXXXXXXX_!!443262353.jpg"></span></span></p><p><span style="color:#6aa84f;    "><span style="font-size:10.5pt;    "><img align="absMiddle" src="http://img02.taobaocdn.com/imgextra/i2/443262353/T2INVMXX0cXXXXXXXX_!!443262353.jpg"></span></span></p><p><span style="color:#6aa84f;    "><span style="font-size:10.5pt;    "><img align="absMiddle" src="http://img02.taobaocdn.com/imgextra/i2/443262353/T2wVXrXdVNXXXXXXXX_!!443262353.jpg"></span></span></p><p><span style="color:#6aa84f;    "><span style="font-size:10.5pt;    "><img align="absMiddle" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/443262353/T2XQXLXhldXXXXXXXX_!!443262353.jpg"></span></span></p><p><span style="color:#6aa84f;    "><span style="font-size:10.5pt;    "><img align="absMiddle" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/443262353/T2qUXLXX8eXXXXXXXX_!!443262353.jpg"></span></span></p><p><span style="color:#6aa84f;    "><span style="font-size:10.5pt;    "></span></span></p><p><span style="color:#bf9000;    "></span></p></div>

[解决办法]

CSS code

#J_DivItemDesc table, #J_DivItemDesc tbody { display:block; }
[解决办法]
HTML code<table style="display:block">
[解决办法]
探讨

引用:

HTML code
<table style="display:block">

你测试的有用吗？ 我测试没效果。。

[解决办法]
怪事，不过很久没用table了，没什么研究
[解决办法]
先前的方法确实还有问题，现在找到一个方法，就是直接设置最内层的段落宽度为750px。。不过，更加奇怪的是，为什么要使用table呢？？

JScript code//楼主你先打开那个taobao页面，然后把下面这段代码复制到控制台下运行一遍就能看到效果了：var oContainer = document.getElementById('J_DivItemDesc');var oTable = document.createElement('table');oTable.insertRow(0).insertCell(0);var obj = oContainer.getElementsByTagName('p');var oTd = oTable.getElementsByTagName('td')[0];for (var i = 0; i < obj.length; i ++) oTd.appendChild(obj[i].cloneNode(true));var oTable2 = oContainer.getElementsByTagName('table')[0].cloneNode(true);oContainer.innerHTML = '';oContainer.appendChild(oTable);oContainer.appendChild(oTable2);var oP = oTable.getElementsByTagName('p');for (var i = 0; i < oP.length; i ++) oP[i].style.width = '750px';

热点排行