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

本文翻译自：How to set up fixed width for

?

Simple scheme: 简单方案：

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

I need to set up a fixed width for <td> . 我需要为<td>设置固定宽度。 I've tried: 我试过了：

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

Also 也

td.something {
  width: 90px;
}

for 对于

<td class="something">B</td>

And even 乃至

<td style="width: 90px;">B</td>

But the width of <td> is still the same. 但是<td>的宽度仍然相同。

---

#1楼

参考：https://stackoom.com/question/11Q7A/如何设置固定宽度-td

---

#2楼

Hard to judge without the context of the page html or the rest of your CSS. 没有页面html或CSS其余部分的上下文很难判断。 There might be a zillion reasons why your CSS rule is not affecting the td element. CSS规则不影响td元素的原因可能不胜枚举。

Have you tried more specific CSS selectors such as 您是否尝试过更具体的CSS选择器，例如

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

This to avoid your CSS being overridden by a more specific rule from the bootstrap css. 这样可以避免引导CSS中更具体的规则覆盖CSS。

(by the way, in your inline css sample with the style attribute, you misspelled width - that could explain why that try failed!) （顺便说一句，在具有style属性的内联css示例中，宽度拼写错误-这可以解释为什么尝试失败的原因！）

---

#3楼

Ok, I just figured out where was the problem - in Bootstrap is set up as a default value width for select element, thus, the solution is: 好的，我刚发现问题出在哪里-在Bootstrap中将select元素设置为默认值width ，因此解决方案是：

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

Anything else doesn't work me. 还有什么对我没有帮助。

---

#4楼

If you're using <table class="table"> on your table, Bootstrap's table class adds a width of 100% to the table. 如果您在<table class="table">使用<table class="table"> ，则Bootstrap的表类将为表添加100％的宽度。 You need to change the width to auto. 您需要将宽度更改为自动。

Also, if the first row of your table is a header row, you might need to add the width to th rather than td. 另外，如果表的第一行是标题行，则可能需要将宽度添加到th而不是td。

---

#5楼

For Bootstrap 4.0: 对于Bootstrap 4.0：

In Bootstrap 4.0.0 you cannot use the col-* classes reliably (works in Firefox, but not in Chrome). 在Bootstrap 4.0.0中，您不能可靠地使用col-*类（在Firefox中有效，但在Chrome中不可用）。 You need to use OhadR's answer : 您需要使用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>

For Bootstrap 3.0: 对于Bootstrap 3.0：

With twitter bootstrap 3 use: class="col-md-*" where * is a number of columns of width. 使用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: 对于Bootstrap 2.0：

With twitter bootstrap 2 use: class="span*" where * is a number of columns of width. 使用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>

** If you have <th> elements set the width there and not on the <td> elements. **如果您有<th>元素，请在此处而不是在<td>元素上设置宽度。

---

#6楼

I was having the same issue, I made the table fixed and then specified my td width. 我遇到了同样的问题，我将表固定了，然后指定了td宽度。 If you have th you can do those as well. 如果您有，也可以做。

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

Template: 模板：

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

Please use CSS for structuring any layouts. 请使用CSS构造任何布局。