HTML表忽略元素样式宽度 [英] HTML table ignoring element-style width
问题描述
忽略元素样式宽度的HTML表格
我有一个HTML表格，其中某些单元格的文本内容非常长。
我想使用jQuery为这些单元格指定一个宽度（以像素为单位），但渲染的表格忽略了给定的宽度。
有没有办法强制表格尊重这个宽度？
谢谢！
JSFiddle ： http：/ /jsfiddle.net/sangil/6hejy/35/
（如果您检查单元格，您可以看到计算出的宽度与元素样式的宽度）
HTML ：
< div id =tblcontclass =tblcont>
< table id =pivot_table>
< tbody>
< tr>
< th id =h0>产品< / th>
< th id =h1>价格< / th>
< th id =h2>变更< / th>
< / tr>
< tr>
<！ - 这是造成麻烦的单元 - >
< td id =c00> Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa< / td>
< td id =c01> 3212< / td>
< td id =c02> 219< / td>
< / tr>
< tr>
< td id =c10>宏碁< / td>
< td id =c11> 3821< / td>
< td id =c12> 206< / td>
< / tr>
< / tbody>
< / table>
< / div>
CSS ：
.tblcont {
overflow：hidden;
width：500px;
}
表{
table-layout：fixed;
border-collapse：collapse;
overflow-x：scroll;
border-spacing：0;
宽度：100％;
}
th，td {
overflow：hidden;
文本溢出：省略号;
word-wrap：分词;
}
th {
height：50px;
Javascript ：
$（document）.ready（function（）{
//这条线没有任何效果！
$（'＃c00'）。width（30）;
}）;
我可以从你的小提琴中看到，你已经掌握了如何获得单词截断和就地这样的词。我认为您可能会发现它有助于执行以下操作：
< table>
< colgroup>
< col style =width：30px; /> <！ - 此样式影响整个第一列 - >
< col />
< col />
< / colgroup>
<！ - 表格的其余部分 - >
< / table>
这种方法适用于符合HTML规范的HTML规范，并且会调整整个列的大小。如果您改为将单元格的显示更改为 inline-block ，如上所述，会发生的是将单元格从表格的流程中移出 - 其他样式更改可能会停止。通过样式化整个 col 使用上面的代码，您可以使用表元素的 table-layout：fixed 样式代替您的优势。
另外 - 我注意到你的单元格设置为使用 text-overflow：ellipsis; 检出这篇文章关于quirksmode，了解它为什么不起作用。您需要的修复方法是进行以下编辑：
th，td {
border：solid＃4682B4 1px;
overflow：hidden;
文本溢出：省略号;
word-wrap：分词;
text-align：center;
white-space：nowrap; / *添加此行* /
}
HTML table ignoring element-style width
I have an HTML table where certain cells have very long text contents.
I want to specify a width (in pixels) for these cells using jQuery, but the rendered table just ignores the given width.
Is there any way to force the table to respect this width?
Thanks!
JSFiddle: http://jsfiddle.net/sangil/6hejy/35/
(If you inspect the cell you can see the the computed width is different than the element-style width)
HTML:
<div id="tblcont" class="tblcont">
<table id="pivot_table">
<tbody>
<tr>
<th id="h0" >product</th>
<th id="h1" >price</th>
<th id="h2" >change</th>
</tr>
<tr>
<!-- this is the cell causing trouble -->
<td id="c00" >Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td id="c01" >3212</td>
<td id="c02" >219</td>
</tr>
<tr>
<td id="c10" >Acer</td>
<td id="c11" >3821</td>
<td id="c12" >206</td>
</tr>
</tbody>
</table>
</div>
CSS:
.tblcont {
overflow: hidden;
width: 500px;
}
table {
table-layout: fixed;
border-collapse: collapse;
overflow-x: scroll;
border-spacing:0;
width: 100%;
}
th, td {
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
th {
height: 50px;
}
Javascript:
$(document).ready(function() {
// THIS LINE HAS NO EFFECT!
$('#c00').width(30);
});
I can see from your fiddle that you already have a good grasp on how to get the word truncation and such in-place. I think you may find it useful to do something like the following:
<table>
<colgroup>
<col style="width: 30px;" /> <!-- this style affects the whole 1st column -->
<col />
<col />
</colgroup>
<!-- the rest of your table here -->
</table>
This method works with the HTML specification in a way that is compliant - and will resize the whole column. If you instead change the display of the cell to inline-block, as mentioned above, what will happen is that you take the cell out of the table's flow - and other stylistic changes may cease working.
By styling the entire col using the code above, you use the table element's table-layout: fixed styling to your advantage instead.
Additionally - I noticed that you have the cells set up to use text-overflow: ellipsis; Check out this article on quirksmode to understand why it's not working. The fix you need is to make the following edit:
th, td {
border: solid #4682B4 1px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
text-align: center;
white-space: nowrap; /* Add this line */
}
这篇关于HTML表忽略元素样式宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
