html - 如何使表td占用其内容的宽度

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

最佳答案

因此，您希望多个单词不扩展到多行吗？您可以使用white-space属性

.narrow table td{
    white-space:nowrap
}

jsfiddle

关于html - 如何使表td占用其内容的宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30096036/