本文翻译自: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构造任何布局。