Question

演示：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解决它。

Answer 1

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

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

Updated Fiddle

Answer 2

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

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

此外，您的几个td元素的结尾标记格式不正确。

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

Answer 3

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

.narrow table td{
    white-space:nowrap
}

jsfiddle

如何使表td取其内容的宽度

3 个答案: