Question

我需要在内容超过特定阈值的表格单元格中添加省略号。

说我有这个：

<tr>
  <td><a href="#">Fooooooooooooooooooooo</a></td>
  <td><a href="#">b</a></td>
  <td><a href="#">c</a></td>
  <td><a href="#">d</a></td>
</tr>

目前我在CSS中设置了这个：

table tr td a,
table tr th a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table tr th:first-child:nth-last-child(4),
table tr th:first-child:nth-last-child(4) ~ th,
table tr td:first-child:nth-last-child(4),
table tr td:first-child:nth-last-child(4) ~ td {
  max-width: 25%;
}

但它不起作用=表格单元格不限于可用宽度的25％。

问题：
是否可以在CSS中设置表格单元格宽度？或者我只能定位表格单元格的内容吗？

Answer 1

通常，表格的单元格采用定义的css宽度，但它会增长以适应其内联/块内容，忽略定义的规则。

一种可能的解决方案是从正常流程中移除锚点，将其设置为position: absolute;并使其成为全宽。这样可以防止单元格扩展，并将锚点限制为可用单元格宽度的100%。

请记住将表格单元格设置为position: relative，以便它充当容器

还记得设置表的宽度，否则25%将无意义

table tr td a,
table tr th a {
  position: absolute;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table {
    width: 200px;
}

table tr th:first-child:nth-last-child(4),
table tr th:first-child:nth-last-child(4) ~ th,
table tr td:first-child:nth-last-child(4),
table tr td:first-child:nth-last-child(4) ~ td {
  max-width: 25%;
    position: relative;
}

<table>
<tr>
  <td><a href="#">Fooooooooooooooooooooo</a></td>
  <td><a href="#">b</a></td>
  <td><a href="#">c</a></td>
  <td><a href="#">d</a></td>
</tr>
</table>

Answer 2

涉及几个问题。首先，table元素没有分配宽度。其次，默认是自动表格布局，其中列宽根据内容的要求进行调整;您可以将table-layout设置为fixed来覆盖此设置。第三，a元素没有设置宽度约束;要解决此问题，请在其上设置宽度并将其格式化为块元素（因为默认情况下它是内联元素，并忽略width属性）。例如：

＆＃13;

table {
  width: 10em;
  table-layout:fixed;
}
table tr td a,
table tr th a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  display: block;
}

table tr th:first-child:nth-last-child(4),
table tr th:first-child:nth-last-child(4) ~ th,
table tr td:first-child:nth-last-child(4),
table tr td:first-child:nth-last-child(4) ~ td {
  max-width: 25%;
}

＆＃13;

<table border>
<tr>
  <td><a href="#">Fooooooooooooooooooooo</a></td>
  <td><a href="#">b</a></td>
  <td><a href="#">c</a></td>
  <td><a href="#">d</a></td>
</tr>
</table>

＆＃13;

我可以通过CSS设置表格单元格的宽度吗？

2 个答案: