如何为<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>的宽度是一样的。

当前回答

希望这篇文章能帮助到一些人:

<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

2016-01-25 07:48:01

其他回答

试试这个——

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

2014-07-30 06:24:17

使用不带td和th的。something

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

2018-02-15 01:55:18

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

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

2013-02-27 15:08:52

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

2019-11-13 13:58:45

这个组合解决方案为我工作，我想要等宽的列

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

结果:-

2017-03-06 13:06:36

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

推荐文章

最新文章

标签