CSS 如何为 <td> 设置固定宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15115052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set up fixed width for <td>?
提问by user984621
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>. I've tried:
我需要为<td>. 我试过了：
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>还是一样的。
回答by Paulo
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).
You need to use OhadR's answer:
在 Bootstrap 4.0.0 中，您不能col-*可靠地使用这些类（在 Firefox 中有效，但在 Chrome 中无效）。您需要使用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>元素上。
回答by DDDD
I was having the same issue, I made the table fixed and then specified my td width. If you have th you can do those as well.
我遇到了同样的问题，我修复了表格，然后指定了我的 td 宽度。如果你有你也可以做这些。
table {
table-layout: fixed;
word-wrap: break-word;
}
Template:
模板：
<td style="width:10%">content</td>
Please use CSS for structuring any layouts.
请使用 CSS 来构建任何布局。
回答by stormwild
Instead of applying the col-md-*classes to each tdin the row you can create a colgroupand apply the classes to the coltag.
您可以创建一个并将类应用于标签，而不是将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>
Demo here
演示在这里
回答by OhadR
Hopefully this one will help someone:
希望这会帮助某人：
<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>
回答by meobyte
If you're using <table class="table">on your table, Bootstrap's table class adds a width of 100% to the table. You need to change the width to auto.
如果您在<table class="table">表格上使用，Bootstrap 的表格类会为表格添加 100% 的宽度。您需要将宽度更改为自动。
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。
回答by ThiagoPXP
In my case I was able to fix that issue by using min-width: 100pxinstead of width: 100pxfor the cells thor td.
在我的情况下，我能够通过使用min-width: 100px代替width: 100px单元格th或td.
.table td, .table th {
min-width: 100px;
}
回答by CHAN
For Bootstrap 4, you can simply use the class helper:
对于 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>
...
回答by Rohit Suthar
Try this -
尝试这个 -
<style>
table { table-layout: fixed; }
table th, table td { overflow: hidden; }
</style>
回答by Randika Vishman
Bootstrap 4.0
引导程序 4.0
On Bootstrap 4.0, we have to declare the table rows as flex-boxes by adding class d-flex, and also drop xs, md, suffixes to allow Bootstrap to automatically derive it from the viewport.
在 Bootstrap 4.0 上，我们必须通过添加类 d-flex 来将表行声明为 flex-boxes，并删除 xs、md、后缀以允许 Bootstrap 从视口自动派生它。
So it will look following:
所以它看起来如下：
<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>
Hope this will be helpful to someone else out there!
希望这对其他人有帮助！
Cheers!
干杯!
回答by Hitesh Sahu
This combined solution worked for me, I wanted equal width columns
这个组合解决方案对我有用，我想要等宽的列
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
}
table th, table td {
overflow: hidden;
}
</style>
Result :-
结果 ：-
