文本溢出：省略号；在表格单元格中

Question

我有一个带有表格的页面，该表格会定期更新。该表有一个标题，后跟许多行。每行有 3 个字段：球员位置、球员姓名（也是球员个人资料的链接）和球员时间。表格占据了整个页面宽度。

html 看起来像这样：

<table id="raceTable">
  <tbody>
    <tr><th colspan="3">3 Players</th></tr>
    <tr><td>1st</td><td><a>Link to profile of player A</a></td><td>00:22:12</td></tr>
    <tr><td>2st</td><td><a>Link to profile of player B</a></td><td>00:23:12</td></tr>
    <tr><td>3st</td><td><a>Link to profile of player C</a></td><td>00:24:15</td></tr>
  </tbody>
</table>

现在，我想让表格可扩展。如果用户改变了窗口的宽度，表格应该被调整大小，中间列的文本不适合时应该被剪掉。

这是我尝试过的 CSS：

body{
  overflow: hidden;
}

table {
    width:100%;
    line-height: 50px;
    border-collapse: collapse;
}

th {
    height: 50px;
    width: 100%;
    background-color: magenta;
}

td {
   height: 50px;
}

#raceTable {
    width: 100%;
}

#raceTable > tbody > tr:not(:first-child) > td:nth-child(1) {
  padding: 10px;
  background-color: red;
  float: left;
}

#raceTable > tbody > tr:not(:first-child) > td:nth-child(2) {
  width: 100%;
  background-color: gray;
}

#raceTable > tbody > tr:not(:first-child) > td:nth-child(2) > a{
  display: block;
  background-color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}  

#raceTable > tbody > tr:not(:first-child) > td:nth-child(3) {
  padding: 10px;
  background: green;
  float: right;
}

我在这里有一个 JSFiddle：http://jsfiddle.net/Gikkman/5wpts61p/17/

我的问题是，如何使text-overflow: ellipsis; 用于表格中间列的链接文本？我无法更改网站的 HTML 结构，我只能应用 CSS。这可能吗？

Answer 1

在表格中，text-overflow: ellipsis; 只适用于固定表格布局，通常你可以申请：

#raceTable {
  table-layout: fixed;
  width: 100%;
}

但您似乎还希望列具有动态宽度。在这种情况下，您可以用 <div> 包裹 <a> 以创建 CSS 固定表格布局结构，然后对其应用文本溢出。

#raceTable td:nth-child(2) div {
  display: table;
  table-layout: fixed;
  width: 100%;
}
#raceTable td:nth-child(2) a {
  display: table-cell;
  background-color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#raceTable {
  line-height: 50px;
  border-collapse: collapse;
  width: 100%;
}

#raceTable th {
  height: 50px;
  background-color: magenta;
}

#raceTable td {
  height: 50px;
}

#raceTable td:nth-child(1) {
  padding: 10px;
  background-color: red;
  /* float: left; */
}

#raceTable td:nth-child(2) {
  width: 100%;
  background-color: gray;
}

#raceTable td:nth-child(2) div {
  display: table;
  table-layout: fixed;
  width: 100%;
}

#raceTable td:nth-child(2) a {
  display: table-cell;
  background-color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#raceTable td:nth-child(3) {
  padding: 10px;
  background: green;
  /* float: right; */
}

<table id="raceTable">
  <thead>
    <tr>
      <th colspan="3">3 Players</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1st</td>
      <td><div><a>Link to profile of player A, Link to profile of player A, Link to profile of player A</a></div></td>
      <td>00:22:12</td>
    </tr>
    <tr>
      <td>2st</td>
      <td><div><a>Link to profile of player B</a></div></td>
      <td>00:23:12</td>
    </tr>
    <tr>
      <td>3st</td>
      <td><div><a>Link to profile of player C</a></div></td>
      <td>00:24:15</td>
    </tr>
  </tbody>
</table>

Answer 2

在重新考虑我的评论后，我仍然建议您使用 table-layout:fixed; 设置表格样式。并像您一样在 a 上重置默认显示，但使用更多的表格元素构建它。

https://www.w3.org/wiki/HTML/Elements/colgroup

https://www.w3.org/WAI/UA/TS/html401/cp1001/1001-COL-COLGROUP.html

table {
  width:100%;
  table-layout:fixed;
  line-height:50px;
}
thead {background:green;}
td {width:100%;}
col {background:gray;}
col:first-child, col:last-child {
  width:4em;
  background:red;
}
col:last-child {
  background:cyan;
}
a {  display:block;
  background-color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width:100%;}

<table id="raceTable">
  <colgroup>
    <col/>
    <col/>
    <col/>
    </col>
  <thead>
    <tr>
      <th colspan="3">3 Players</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1st</td>
      <td><a>Link to profile of player A</a></td>
      <td>00:22:12</td>
    </tr>
    <tr>
      <td>2st</td>
      <td><a>Link to profile of player B</a></td>
      <td>00:23:12</td>
    </tr>
    <tr>
      <td>3st</td>
      <td><a>Link to profile of player C Link to profile of player C Link to profile of player C</a></td>
      <td>00:24:15</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/bn2trf2o

这里发生的是 th 和 table-layout:fixed 上的 colspan 属性；均匀地共享列。

为避免这种混淆，您可以使用 colgroup 和 col 标签来初始化每列的每个宽度。大小 first 和 last ，中间将使用所有剩余空间。您也可以使用它们为每列设置背景默认颜色。只要您在任何其他元素上设置 bg，它就会被隐藏（就像在 sn-p 中的 thead 一样）

---

编辑

根据您的结构，可以在 trs 上重置显示：

table,
tr {
  width: 100%;
  table-layout: fixed;
  line-height: 50px;
  border-spacing: 0;
}

tr {
  display: table;
}

th {
  background: magenta
}

td {
  background: gray;
}

td:first-child,
td:last-child {
  width: 30px;
  background: red;
}

td:last-child {
  background: cyan;
  width: 100px;
}

a {
  display: block;
  background-color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<table id="raceTable">
  <tbody>
    <tr>
      <th colspan="3">3 Players</th>
    </tr>
    <tr>
      <td>1st</td>
      <td><a>Link to profile of player A</a></td>
      <td>00:22:12</td>
    </tr>
    <tr>
      <td>2st</td>
      <td><a>Link to profile of player B</a></td>
      <td>00:23:12</td>
    </tr>
    <tr>
      <td>3st</td>
      <td><a>Link to profile of player C Link to profile of player C Link to profile of player C</a></td>
      <td>00:24:15</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/bn2trf2o/1/