带有填充剩余宽度中间列

Question

我试图让一条水平线在表格的第一列和最后一列之间拉伸但是如果文本很长，我需要包装第一列和最后一列。我发现获得预期效果的唯一方法是在中间列上使用width:100%;，在第一个和最后一个上使用white-space:nowrap;，但我需要找到另一种方法，因为我需要文本来包装当没有足够的空间时。有没有办法在纯CSS中实现这种效果？

https://jsfiddle.net/macu/8axk5qv5/4/

table {
  width: 100%;
}

td {
  vertical-align: middle;
  white-space: nowrap;
}

td:nth-child(2) {
  width: 100%;
}

.line {
  border-top: thin solid blue;
}

<table>
  <tr>
    <td>Title cell with a long title that should wrap</td>
    <td><div class="line"></div></td>
    <td>Another cell, should wrap</td>
  </tr>
</table>

如果文本足够长，则应该没有行，文本应该正常换行：

Answer 1

您可以在每个单元格中放置一个span或div，并使它们使用白色背景，然后在表格行上设置该行以直观地创建此类布局。

查看下面的小提琴演示，以便您轻松调整大小并查看包装文本。

<强> jsFiddle

.table {
  width: 100%;
  border-collapse: collapse;
}

.table tr {
  background: linear-gradient(blue, blue) center/99.99% 1px no-repeat;
}

.table div {
  background: white;
  display: inline-block;
}

.middle div {
  min-width: 100px; /*remove or adjust value as need*/
}

.last {
  text-align: right;
}

<table class="table">
  <tr>
    <td class="first">
      <div>Title cell with a long title that should wrap</div>
    </td>
    <td class="middle">
      <div><!-- This td can be removed if no min-width needed --></div>
    </td>
    <td class="last">
      <div>Another cell, should wrap</div>
    </td>
  </tr>
</table>

但是如果你不必使用表格，那么使用flexbox会更容易。

<强> jsFiddle

.container {
  display: flex;
}

.line {
  background: linear-gradient(blue, blue) center/1px 1px repeat-x;
  flex: 1;
  min-width: 100px; /*remove or adjust value as need*/
}

<div class="container">
  <div>Title cell with a long title that should wrap</div>
  <div class="line"></div>
  <div>Another cell, should wrap</div>
</div>

Answer 2

尝试删除空格：nowrap;在TD标签上，然后用

定位第一个和第三个TD

td {
vertical-align: middle;
//white-space: nowrap;
}
td:nth-child(1),td:nth-child(3) {
//add whatever min-width AND max-width so it could be something like this
min-width:150px;
max-width:300px;
}

看看是否有帮助。