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

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的colspan属性： 均匀地共享各列。

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