首页 文章

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

提问于
浏览 次
430

简单方案：

<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> 的宽度仍然相同 .

css twitter-bootstrap width html-table

16 回答

  • 0

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

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

    For 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> 元素 .

    回复于
  • 2

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

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

    模板：

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

    请使用CSS构建任何布局 .

    回复于
  • 109

    不是将 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>

    演示here

    回复于
  • 9

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

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

    回复于
  • 4

    希望这个会帮助某人：

    <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

    回复于
  • 53

    在我的情况下，我能够通过使用 min-width: 100px 而不是 width: 100px 来解决问题 th 或 td .

    .table td, .table th {
    min-width: 100px;
}
    回复于
  • 2

    对于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>
      ...
    回复于
  • 7

    试试这个 -

    <style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>
    回复于
  • 920

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

    <style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

    结果： -

    enter image description here

    回复于
  • 37

    Bootstrap 4.0

    在Bootstrap 4.0中，我们必须通过添加类d-flex将表行声明为flex-boxes，并且还要删除xs，md，suffix以允许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>

    希望这对那里的其他人有所帮助！

    干杯!

    回复于
  • 0

    好的，我只知道问题出在哪里 - 在Bootstrap中设置为 select 为 select 元素的默认值，因此，解决方法是：

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

    其他任何东西都不起作用 .

    回复于
  • 34

    没有页面html或其他CSS的上下文，很难判断 . 您的CSS规则不会影响td元素的原因可能有很多 .

    你有没有尝试过更具体的CSS选择器，比如

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

    这样可以避免CSS被引导程序css中的更具体的规则覆盖 .

    （顺便说一下，在带有style属性的内联css示例中，拼写错误的宽度 - 这可以解释为什么尝试失败！）

    回复于
  • 0

    我一直在努力解决这个问题，所以万一有人和我一样犯了同样的愚蠢错误......在 <td> 里面我应用了 white-space:pre 样式的元素 . 这使我的所有table / tr / td技巧都被丢弃了 . 当我删除那个样式时，突然我的所有文本都在 td 中很好地格式化了 .

    因此，请始终检查主容器（如 table 或 td ），还要检查您是否在某处更深层取消了您的漂亮代码:)

    回复于
  • 19

    使用 .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>
    回复于
  • 68

    这对我来说都不起作用，并且在数据表上有许多cols使％或sm类等于引导程序上的12个元素布局 .

    我正在处理数据表Angular 5和Bootstrap 4，并且在表中有很多cols . 我的解决方案是在 TH 中添加具有特定宽度的 DIV 元素 . 例如对于cols "Person Name"和"Event date"我需要一个特定的宽度，然后将 div 放在col标头中，然后整个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> ...
    回复于
  • 3
    <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>
    回复于

相关问题