带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

来实现

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我注意到添加div的解决方案。

如果您不想或不需要添加div，则可以使用max-width。

说明： 您的第一个问题是您的元素都没有设置宽度属性。首先，我会设置你的＆＃34;非常非常长的第二个文本的最大宽度＆＃34;。例如，您可以将max-width: 60vw;添加到.fluid。如果您不熟悉vw语法，请在此处阅读更多内容：https://www.w3.org/TR/css3-values/#vw

只添加这个，你几乎就在那里。您还有一个问题：在非常小的设备/分辨率上，您会注意到您的第三个表格数据<td></td>将从可见区域消失。

我建议您在表格数据display: inline-block;上使用<td></td>，而不是折叠所有内容。它的作用是，只要它们有足够的空间来内联，它就会内联显示您的表数据。此外，一小部分信息将是可见的，而不是根本看不到任何信息的结果。当可用区域变小（即调整窗口大小）时，它们将开始逐个向下跳跃。

完整的CSS：

td { 
  border: 1px solid black; 
  display: inline-block;
}

.fluid { 
  max-width: 60vw; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}