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

对于引导 4.0：

在 Bootstrap 4.0.0 中，您不能可靠地使用 col-* 类（在 Firefox 中有效，但在 Chrome 中无效）。您需要使用 OhadR's answer：

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

对于引导 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>

对于引导 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> 元素上。

---

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

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

模板：

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

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

---

您可以创建一个 colgroup 并将这些类应用到 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>

演示here

---

希望这个可以帮助某人：

<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

---

如果您在表上使用 <table class="table">，则 Bootstrap 的表类会为表添加 100% 的宽度。您需要将宽度更改为自动。

此外，如果表格的第一行是标题行，您可能需要将宽度添加到 th 而不是 td。

---

就我而言，我能够通过对单元格 th 或 td 使用 min-width: 100px 而不是 width: 100px 来解决该问题。

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

---

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

---

引导程序 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>
    </tbody>
</table>

希望这对其他人有帮助！

干杯!

---

尝试这个 -

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

---

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

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

---

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

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

结果 ：-

https://i.stack.imgur.com/L03Sy.png

---

在 Bootstrap 4 中使用 d-flex 而不是 row 作为“tr”

问题是“行”类比父容器占用更多宽度，这会引入问题。

你好	世界
8列	4列

---

好的，我刚刚发现问题出在哪里 - 在 Bootstrap 中设置为 select 元素的默认值 width，因此，解决方案是：

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

其他任何事情都对我不起作用。

---

这就是我不用处理 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 列网格。

---

如果没有页面 html 或 CSS 的其余部分的上下文，很难判断。您的 CSS 规则不影响 td 元素的原因可能有很多。

您是否尝试过更具体的 CSS 选择器，例如

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

这是为了避免您的 CSS 被引导 css 中更具体的规则覆盖。

（顺便说一句，在您的带有样式属性的内联 CSS 示例中，您拼错了宽度 - 这可以解释为什么尝试失败了！）

---

我一直在为这个问题苦苦挣扎，所以以防万一有人犯了和我一样的愚蠢错误……在 <td> 内，我应用了具有 white-space:pre 样式的元素。这使得我所有的 table/tr/td 技巧都被丢弃了。当我删除该样式时，突然间我的所有文本都在 td 中很好地格式化了。

因此，请始终检查主容器（例如 table 或 td），但也要始终检查您是否没有在更深的地方取消漂亮的代码 :)

---

在表格中使用固定表格布局 css，并设置 td 的百分比。

---

在 bootstarp 4 中，您可以在表中使用 row 和 col-*，我使用它如下

<table class="table">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 row</th>
            <th class="col-sm-4">4 row</th>
            <th class="col-sm-5">5 row</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td class="col-sm-3">some text</td>
            <td class="col-sm-4">some text</td>
            <td class="col-sm-5">some text</td>
        </tr>
    </tbody>
</table>

---

这些都不适合我，并且在数据表上有很多列可以使 % 或 sm 类等于引导程序上的 12 个元素布局。

我正在使用数据表 Angular 5 和 Bootstrap 4，并且表中有很多列。我的解决方案是在 TH 中添加具有特定宽度的 DIV 元素。例如，对于 cols“人名”和“事件日期”，我需要一个特定的宽度，然后在 col 标题中放置一个 div，然后整个 col 宽度调整为 TH 上的 div 指定的宽度：

<table datatable [dtOptions]="dtOptions" *ngIf="listData" class="table table-hover table-sm table-bordered text-center display" width="100%">
    <thead class="thead-dark">
        <tr>
            <th scope="col">ID </th>
            <th scope="col">Value</th>
            <th scope="col"><div style="width: 600px;">Person Name</div></th>
            <th scope="col"><div style="width: 800px;">Event date</div></th> ...

---

对我来说，将表格的布局设置为自动并定位特定列的 <th> 就可以了。我发现在任何行中定位 <td> 也可以。如果需要，请随意添加 !important。

.table {
  table-layout: auto;
}

th {
 width: 10%;
}

---

我也遇到了这个问题，我按照这种方法来克服......所以你可以试试

<td style="min-width:120px;">B</td>

---

使用 .something 没有 td 或 th

---

在引导表 4.x 中

如果您在 init 参数中创建表而不是使用 HTML。

您可以在 columns 属性中指定宽度参数：

$("table").bootstrapTable({
    columns: [
        { field: "title", title: "title", width: "100px" }
    ]
});

---

---