5

忽略元素样式宽度的 HTML 表格

我有一个 HTML 表格，其中某些单元格的文本内容很长。

我想使用 jQuery 为这些单元格指定一个宽度（以像素为单位），但呈现的表格只是忽略了给定的宽度。

有什么办法可以强制表格尊重这个宽度？

谢谢！

JSFiddle：http: //jsfiddle.net/sangil/6hejy/35/

（如果您检查单元格，您可以看到计算出的宽度与元素样式的宽度不同）

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;
}

​<strong>Javascript：

$(document).ready(function() {

  // THIS LINE HAS NO EFFECT!
  $('#c00').width(30);
});​
4

4 回答 4

7

我从你的小提琴中可以看出，你已经很好地掌握了如何获得截断等词。我认为您可能会发现执行以下操作很有用：

<table>
  <colgroup>
    <col style="width: 30px;" /> <!-- this style affects the whole 1st column -->
    <col />
    <col />
  </colgroup>

  <!-- the rest of your table here -->
</table>

此方法以符合 HTML 规范的方式使用 - 并将调整整个列的大小。如果您改为display将单元格的 更改为inline-block，如上所述，将会发生的情况是您将单元格从表格的流程中取出 - 并且其他样式更改可能会停止工作。

通过使用上面的代码设置整个样式col，您可以使用table元素的table-layout: fixed样式来代替您。

此外 - 我注意到您已将单元格设置为使用text-overflow: ellipsis;查看这篇关于 quirksmode 的文章以了解它为什么不起作用。您需要的修复是进行以下编辑：

th, td {
    border: solid #4682B4 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    text-align: center;

    white-space: nowrap; /* Add this line */
}
于 2012-10-25T16:57:17.280 回答
6

默认情况下，表格单元格适合其内容并忽略您的宽度。

已经提供的答案的其他可能性：

用其他容器包围文本：

<td id="c00" ><div>Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>

并改变它的宽度：

$('#c00 div').width(30);
于 2012-10-25T16:58:49.167 回答
2

你有几个问题：

table-layout: fixed告诉列相等。

然后，即使你把它拿出来，你的文本也比 30 像素宽，没有空格，所以它不会比这更窄"aaaaaaaaaa"等等。你需要使文本更小，或者添加空格。

最后，width应该是"30px"（用引号引起来）。

希望有帮助。

于 2012-10-25T16:56:49.780 回答
1

试试这个：

$('#c00').css("width","30px");

或这个：

<td id="c00" style='width:30px'>

如果您使用的是 IE，则可能需要打开兼容模式。此外，请确保您正在导入正确的 jQuery 插件。

于 2012-10-25T16:53:49.793 回答