text-overflow：省略号；在 table 单元格中

Question

我有一个 table 的页面，该页面会定期更新。 table 有一个标题，后面跟着一些行。每行有 3 个字段：玩家位置、玩家姓名（也是玩家个人资料的 link）和玩家时间。 table 占据整个页面宽度。

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>

现在，我想让 table 具有可扩展性。如果用户改变 window 的宽度，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; 为 table 中间栏中的 link 文本工作？我无法更改网站 HTML 的结构，我只能申请 CSS。这可能吗？

Answer 1

在table中，text-overflow: ellipsis;只适用于固定的table布局，通常你可以直接应用：

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

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

#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; 来设置您的 table 样式；并像您一样在 a 上重置默认显示，但使用更多 table 元素构建它。

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 ，中间将使用所有 space left.You 也可以使用它们为每个列设置背景默认颜色。一旦你在任何其他元素上设置背景，它就会被隐藏（就像代码片段中的 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/

text-overflow：省略号；在 table 单元格中

text-overflow: ellipsis; in table cell

html

css

html-table

ellipsis

编辑