如何更改表格行宽答案

【问题标题】：How to change table row width如何更改表格行宽
【发布时间】：2017-01-30 02:08:21
【问题描述】：

我有一个带有 Bootstrap 样式的 HTML 响应表，问题是某些单元格可能有很多文本，因此我的单元格看起来像这样：

标题
文字........
....enf 的文本
在这里。

我期望的是这样的：

（居中对齐）标题
文本........文本在这里结束。

我尝试为所有“td”添加宽度样式，添加“col-md”，但没有任何效果，这是我的表格：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="container">
  <div class="panel panel-info">
  </div>
  <div class="panel-heading">
    <h4>Table</h4>
  </div>
  <div class="panel-body">
    <div class="col-md-12">
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <td>ID</td>
              <td>Revision</td>
              <td>Proposito</td>
              <td>OpenDate</td>
              <td>CloseDate</td>
              <td>Copias</td>
              <td>Status</td>
              <td>Owner</td>
              <td>Model</td>
              <td>VS</td>
              <td>Station</td>
              <td>FollowUp</td>
              <td>FollowUpNumber</td>
              <td><span class="glyphicon glyphicon-cog"></span>
              </td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>00001</td>
              <td>A</td>
              <td>Quality Alert New</td>
              <td>2016-09-21</td>
              <td>2016-10-21</td>
              <td>1</td>
              <td>On approve</td>
              <td>myuser_forRegister</td>
              <td>XXXX-5554-3332-PA</td>
              <td>VS04</td>
              <td>Shippment</td>
              <td>8D</td>
              <td>8</td>
              <td><span class="glyphicon glyphicon-pencil"></span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div>
      </div>
    </div>

换句话说，我想像 Snippet 代码一样显示表格，但是如果您在整页中看到它，您可以看到我的问题，我该怎么办？

【问题讨论】：

Making wide table fit bootstrap container的可能重复
还可以看看stackoverflow.com/questions/14725342/…

标签： html css twitter-bootstrap

【解决方案1】：

只需添加属性：

white-space: nowrap;

到您的表格或您想要具有动态宽度的单元格。

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    white-space: nowrap;
}

【讨论】：

就是这样！谢谢！

【解决方案2】：

如果你不想让你的文本换行，你可以添加一个css属性：

white-space: nowrap;

您可以将其直接应用于 td 或 td 内的跨度。

请记住，表格是贪婪的，并且在必要时会溢出其容器，无论是否设置了宽度。删除文本换行会增加发生这种情况的机会。

【讨论】：