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

Question

简单方案:

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

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

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

也

td.something {
  width: 90px;
}

对于

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

乃至

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

但宽度<td>仍然相同.

Answer 1

对于Bootstrap 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 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>

对于Bootstrap 2.0:

使用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>

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

Answer 2

我遇到了同样的问题,我修复了表格,然后指定了我的td宽度.如果你有,你也可以做到.

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

模板:

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

请使用CSS构建任何布局.

Answer 3

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

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

在这里演示

Answer 4

如果您在<table class="table">桌面上使用,Bootstrap的表类会向表中添加100%的宽度.您需要将宽度更改为自动.

此外,如果表的第一行是标题行,则可能需要将宽度添加到th而不是td.

Answer 5

希望这个会帮助某人:

<table class="table">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</td>
      <td>Val 2</td>
      <td>Val 3</td>
      <td>Val 4</td>
      <td>Val 5</td>
    </tr>
  </tbody>
</table>

https://github.com/twbs/bootstrap/issues/863

Answer 6

在我来说,我是能够通过使用来解决这个问题min-width: 100px,而不是width: 100px在细胞th或td.

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

Answer 7

对于Bootstrap 4,您只需使用类助手:

<table class="table">
  <thead>
    <tr>
      <td class="w-25">Col 1</td>
      <td class="w-25">Col 2</td>
      <td class="w-25">Col 3</td>
      <td class="w-25">Col 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      ...

Answer 8

Bootstrap 4 和 5 有一个宽度实用程序，用于调整 html 元素宽度示例：

<tr class="w-50">
    <td class="w-25">A</td>
    ...
</tr>

Answer 9

试试这个 -

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>

Answer 10

这个组合的解决方案对我有用,我想要等宽的列

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

结果: -

Answer 11

Bootstrap 4.0

在Bootstrap 4.0上，我们必须通过添加类d-flex将表行声明为flex-boxes，并删除xs，md，后缀以允许Bootstrap从视口自动派生它。

因此它将看起来如下：

<table class="table">
    <thead>
        <tr class="d-flex">
            <th class="col-2"> Student No. </th>
            <th class="col-7"> Description </th>
            <th class="col-3"> Amount </th>
        </tr>
    </thead>

    <tbody>
        <tr class="d-flex">
            <td class="col-2">test</td>
            <td class="col-7">Name here</td>
            <td class="col-3">Amount Here </td>
        </tr>
</table>

希望这对外面的人有帮助！

干杯!