css - 如何设置固定宽度？

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>还是一样的。

score 1235 · Accepted Answer

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

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

score 157 · Accepted Answer

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

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

模板：

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

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

score 80 · Accepted Answer

您可以创建一个并将类应用于标签，而不是将col-md-*类应用于行中的每个。tdcolgroupcol

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

演示在这里

score 75 · Accepted Answer

希望这个可以帮助某人：

<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

score 63 · Accepted Answer

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

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

score 56 · Accepted Answer

在我的情况下，我能够通过使用min-width: 100px代替width: 100px单元格th或td.

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

score 51 · Accepted Answer

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

score 37 · Accepted Answer

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

希望这对其他人有帮助！

干杯!

score 12 · Accepted Answer

试试这个 -

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

score 8 · Accepted Answer

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

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

结果：-

score 8 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

score 2 · Accepted Answer

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

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

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

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

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

<table class="table">
  <tbody>
    <tr class="d-flex">
      <td class="col-sm-8">Hello</td>
      <td class="col-sm-4">World</td>
    </tr>
    <tr class="d-flex">
      <td class="col-sm-8">8 columns</td>
      <td class="col-sm-4">4 columns</td>
    </tr>
  </tbody>
</table>

score 2 · Accepted Answer

2

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

于 2020-08-05T05:33:53.887 回答

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

.table {
  table-layout: auto;
}

th {
 width: 10%;
}

score -1 · Accepted Answer

使用.something没有td或th

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <style>
    .something {
      width: 90px;
      background: red;
    }
  </style>
</head>
<body>

<div class="container">
  <h2>Fixed width column</h2>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th class="something">Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

score -1 · Accepted Answer

在引导表 4.x 中

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

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

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

score -3 · Accepted Answer

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

css - 如何设置固定宽度？

23 回答 23

对于引导 4.0：

对于引导 3.0：

对于引导 2.0：

引导程序 4.0

Related

Reference