html - 带 CSS 的响应式表格列

Question

有一个包含三列的表格，第一列和最后一列是固定的，中间的列应该是可变的。

问题 - 中间栏内有带有 nowrap 的文本，它阻止了它的流动性。

如何做到这一点？

它在宽页面上的外观(正确的行为):

它在窄页面上的外观:

它在窄页面上的实际外观(不正确的行为，请参见滚动条):

代码 https://jsfiddle.net/8c9msa71/

td {
  border: 1px solid black;
}

.fluid {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td>first</td>
    <td class="fluid">very-very-very-very-very-very-long-second-text</td>
    <td>third</td>
  </tr>
</table>

Answer 1

你可以通过添加一个div来做到这一点

td { border: 1px solid black; }
.fluid { position: relative; width: 70%;}
.fluid div {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  left: 5px;
  right: 5px;
  top: 0;
}

<table width="100%">
  <tr>
    <td>first</td>
    <td class="fluid">
    <div>very-very-very-very-very-very-long-second-text</div>
    </td>
    <td>third</td>
  </tr>
</table>