如何让 table td 取其内容的宽度

Question

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

我正在使用包含相同 table 的 "wide" 和 "narrow" 模拟响应式布局。

在 "narrow" 中，您可以左右滚动。

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

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

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

Answer 1

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

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

如何让 table td 取其内容的宽度

How to make table td take the width of its content

html

css

html-table

responsiveness