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

但看起来你也希望列的动态宽度。在这种情况下，您可以使用<a>包装<div>以创建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

重新考虑我的评论之后，我仍然会建议用表格布局来设置你的表格：固定;并按原样重置默认显示，但使用更多表格元素构建它。

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属性：fixed;它均匀地分享了这些列。

为避免这种混淆，您可以使用colgroup和col标签为每列初始化每个宽度。第一个和最后一个，中间将使用剩下的所有空格。您也可以使用它们为每列设置背景defaut颜色。只要你在任何其他元素上设置了一个bg就会隐藏它（就像你在片段中所做的那样）

修改

从您的结构中，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/

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

2 个答案:

修改