提问者:小点点

如何设置<td>的固定宽度?


简单方案:

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

我需要为设置固定宽度。我试过:

tr.something {
  td {
    width: 90px;
  }
}

td.something {
  width: 90px;
}

对于

<td class="something">B</td>

甚至

<td style="width: 90px;">B</td>

的宽度仍然相同。


共3个答案

匿名用户

在Bootstrap 4.0.0中,您不能可靠地使用col-*类(在Firefox中有效,但在Chrome中无效)。您需要使用OHADR的答案:

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

对于twitter bootstrap 3,使用:class=“col-md-*”,其中*是宽度的列数。

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

对于twitter bootstrap 2,使用:class=“span*”,其中*是宽度的列数。

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

**如果您有元素,请在那里设置宽度,而不要在元素上设置宽度。

匿名用户

我有同样的问题,我使表固定,然后指定我的td宽度。如果你有th,你也可以做这些。

table {
    table-layout: fixed;
    word-wrap: break-word;
}

模板:

<td style="width:10%">content</td>

请使用CSS结构化任何布局。

匿名用户

您可以创建一个col-md-*,并将类值应用于col标记,而不是将col-md-*类值应用于行中的每个td

    <table class="table table-striped">
        <colgroup>
            <col class="col-md-4">
            <col class="col-md-7">
        </colgroup>
        <tbody>
        <tr>
            <td>Title</td>
            <td>Long Value</td>
        </tr>
        </tbody>
    </table>

此处演示