0

演示：http: //jsfiddle.net/zvmcyp4w/

.wide {
  width: 400px;
  background: lightblue;
}
.narrow {
  width: 200px;
  background: lightpink;
}
.table-responsive {
  max-width: 100%;
  overflow-x: auto;
}
table {
  border: 1px solid black;
  border-collapse: collapse;
}
td {
  border: 1px solid black;
  padding: 5px;
}

<div class="wide">
  <div class="table-responsive">
    <table>
      <tr>
        <td>Many words</>
        <td>word</td>
        <td>oneword</td>
        <td>onemoreword</td>
      </tr>
    </table>
  </div>
</div>

<div class="narrow">
  <div class="table-responsive">
    <table>
      <tr>
        <td>Many words</>
        <td>word</td>
        <td>oneword</td>
        <td>onemoreword</td>
      </tr>
    </table>
  </div>
</div>

我正在模拟包含同一个表格的“宽”和“窄”的响应式布局。

在“窄”中，您可以左右滚动。

如果一个单元格的内容是由多个单词组成的，比如第一个单元格，它会自动分成几行。

我正在寻找的是避免断线并让单元格水平扩展以适应其内容，因为内容是动态的，因此不允许使用固定宽度或最小宽度。

理想情况下，一个干净的纯 CSS 解决方案会很棒，我已经知道如何用 JavaScript 解决它。

4

3 回答 3

1

添加white-space: pre到表格单元格：

td {
    border: 1px solid black;
    padding: 5px;
    white-space: pre;
}

更新了小提琴。

于 2015-05-07T08:50:10.853 回答
1

您可以调整td样式以包括white-space: nowrap;

td {
  border: 1px solid black;
  padding: 5px;
  white-space: nowrap;
}

此外，您的一些td元素的结束标签格式不正确。

http://jsfiddle.net/zvmcyp4w/2/

于 2015-05-07T08:50:22.157 回答
1

所以你想让多个单词不要在多行上展开？你可以使用white-space属性

.narrow table td{
    white-space:nowrap
}

jsfiddle

于 2015-05-07T08:51:14.683 回答