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

当前回答

在我的案例中，我能够通过使用min-width: 100px而不是width: 100px来修复单元格th或td的问题。

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

2014-05-07 05:48:33

其他回答

如果没有页面html或其他CSS的上下文，就很难判断。你的CSS规则不影响td元素可能有无数个原因。

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

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

这可以避免您的CSS被来自引导CSS的更具体的规则所覆盖。

(顺便说一下，在你的内联CSS样本样式属性，你拼错了宽度-这可以解释为什么尝试失败!)

2013-02-27 14:56:54

好的，我刚刚找出了问题所在-在引导设置为默认值宽度选择元素，因此，解决方案是:

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

其他的都对我没用。

2013-02-27 15:06:04

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

2018-06-07 10:23:15

在Bootstrap 4中使用d-flex代替row表示“tr”

问题是“row”类比父容器占用更大的宽度，这就产生了问题。

<table class=“table”> <tbody> <tr class=“d-flex”> <td class=“col-sm-8”>你好</td> <td class=“col-sm-4”>World</td> </tr> <tr class=“d-flex”> <td class=“col-sm-8”>8 列</td> <td class=“col-sm-4”>4 列</td> </tr> </tbody> </table>

2019-07-20 14:34:04

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

<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>设置固定宽度?

推荐文章

最新文章

标签