如何根据内容自动调整表格 td 宽度

Question

首先请尝试查看此 jsFiddle ，如您所见，我有一个包含很多列的表格，我唯一的问题是如何制作所有 td 根据其中文本的长度调整其宽度它没有换行的话？

这是我的代码：

 .content {
  width: 1100px;
  height: 200px;
  background: #fdfdfd;
  margin: 0px auto;
  position: relative;
  top: 40px;
  border: 1px solid #aaaaaa;
}

.content .content-header {
  width: 100%;
  height: 40px;
  background-color: #aaa;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
  border-bottom: 1px solid #aaaaaa;
}

.content-loader {
  overflow: scroll;
}

.content-loader table {
  width: auto;
  background: #aaa;
}

.content-loader table tr {
  background: #eee;
}

.content-loader table tr td {}

 <div class="content">
  <div class="content-header">

  </div>
  <div class="content-loader">
    <table>
      <tbody>
        <tr>
          <td>First Name</td>
          <td>Last Name</td>
          <td>Gender</td>
          <td>Birth Date</td>
          <td>Address</td>
          <td>Zip Code</td>
          <td>Nationality</td>
          <td>Contact Number</td>
          <td>Email</td>
          <td>Username</td>
          <td>Course</td>
          <td>Year</td>
          <td>ID Number</td>
          <td>Subjects</td>
          <td>Other Fields</td>
          <td>Other Fields</td>
          <td>Other Fields</td>
          <td>Other Fields</td>
          <td>Other Fields</td>
          <td>Other Fields</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

有人可以帮我吗？或者，如果这里已经有人问过，请告诉我链接。

原文由 Pengun 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

删除所有使用 CSS 设置的宽度，并将空白设置为 nowrap，如下所示：

 .content-loader tr td {
    white-space: nowrap;
}

我也会从容器中删除固定宽度（或将 overflow-x: scroll 添加到容器中）如果您希望字段完整显示而不看起来很奇怪……

在此处查看更多信息：http: //www.w3schools.com/cssref/pr_text_white-space.asp

原文由 Joshua Smickus 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将此样式属性用于无文字换行：

 white-space: nowrap;

原文由 NerdNeo 发布，翻译遵循 CC BY-SA 3.0 许可协议