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

简单的方案:

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

我需要为<td>设置一个固定宽度。我试过了:

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

Also

td.something {
  width: 90px;
}

for

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

甚至

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

但是<td>的宽度是一样的。

当前回答

使用固定的表布局CSS在表，并设置一个百分比的td。

2020-08-05 05:33:53

其他回答

<div class="row" id="divcashgap" style="display:none"> <div class="col-md-12"> <div class="table-responsive"> <table class="table table-default" id="gvcashgapp"> <thead> <tr> <th class="1">BranchCode</th> <th class="2"><a>TC</a></th> <th class="3">VourNo</th> <th class="4" style="min-width:120px;">VourDate</th> <th class="5" style="min-width:120px;">RCPT Date</th> <th class="6">RCPT No</th> <th class="7"><a>PIS No</a></th> <th class="8" style="min-width:160px;">RCPT Ammount</th> <th class="9">Agging</th> <th class="10" style="min-width:160px;">DesPosition Days</th> <th class="11" style="min-width:150px;">Bank Credit Date</th> <th class="12">Comments</th> <th class="13" style="min-width:150px;">BAC Comment</th> <th class="14">BAC Ramark</th> <th class="15" style="min-width:150px;">RAC Comment</th> <th class="16">RAC Ramark</th> <th class="17" style="min-width:120px;">Update Status</th> </tr> </thead> <tbody id="tbdCashGapp"></tbody> </table> </div> </div> </div>

2019-01-03 07:06:09

当我不需要处理IE时，我经常这样做

    <tr>
      <th scope="col" style="width: calc(1 * 100% / 12)">#</th>
      <th scope="col" style="width: calc(4 * 100% / 12)">Website</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Username</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Password</th>
      <th scope="col" style="width: calc(1 * 100% / 12)">Action</th>
    </tr>

这样你就可以有一个熟悉的12 col网格。

2020-01-17 10:07:28

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

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

模板:

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

请使用CSS来构造任何布局。

2013-09-30 20:29:12

在我的案例中，我能够通过使用min-width: 100px而不是width: 100px来修复单元格th或td的问题。

.table td, .table th {
    min-width: 100px;
}

2014-05-07 05:48:33

对于引导4.0:

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

对于Bootstrap 3.0:

用twitter引导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>

对于Bootstrap 2.0:

与twitter引导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>

**如果你有<th>元素设置宽度，而不是<td>元素。

2013-08-28 20:58:46

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

推荐文章

最新文章

标签