Html 如何从内容中自动调整表格 td 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21632363/
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 auto adjust table td width from the content
提问by Pengun
First please try to look at this jsFiddle, as you can see I have a table with lots of columns my only problem is how can i make all the tdadjust its width depending on how long is the text inside of it without wrapping the words?
首先，请尝试查看这个jsFiddle，正如您所看到的，我有一个包含很多列的表格，我唯一的问题是如何td根据其中的文本长度调整其宽度而不用换行？
Here is my HTML code:
这是我的 HTML 代码：
<div class="content">
<div class="content-header">
</div>
<div class="content-loader">
<table>
<tbody>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Gender</td>
<td>Birth Date</td>
<td>Address</td>
<td>Zip Code</td>
<td>Nationality</td>
<td>Contact Number</td>
<td>Email</td>
<td>Username</td>
<td>Course</td>
<td>Year</td>
<td>ID Number</td>
<td>Subjects</td>
<td>Other Fields</td>
<td>Other Fields</td>
<td>Other Fields</td>
<td>Other Fields</td>
<td>Other Fields</td>
<td>Other Fields</td>
</tr>
</tbody>
</table>
</div>
</div>
And here is my CSS code:
这是我的 CSS 代码：
.content {
width: 1100px;
height: 200px;
background: #fdfdfd;
margin: 0px auto;
position: relative;
top: 40px;
border: 1px solid #aaaaaa;
}
.content .content-header {
width: 100%;
height: 40px;
background-color:#aaa;
background-image:-moz-linear-gradient(top,#eeeeee,#cccccc);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#eeeeee),to(#cccccc));
background-image:-webkit-linear-gradient(top,#eeeeee,#cccccc);
background-image:-o-linear-gradient(top,#eeeeee,#cccccc);
background-image:linear-gradient(to bottom,#eeeeee,#cccccc);
border-bottom: 1px solid #aaaaaa;
}
.content-loader {
overflow: scroll;
}
.content-loader table {
width: auto;
background: #aaa;
}
.content-loader table tr {
background: #eee;
}
.content-loader table tr td {
}
Can someone please help me with this? Or if it's already been asked here please show me the link.
有人可以帮我解决这个问题吗？或者，如果这里已经有人问过了，请给我看链接。
回答by Joshua Smickus
Remove all widths set using CSS and set white-space to nowrap like so:
删除使用 CSS 设置的所有宽度并将空白设置为 nowrap，如下所示：
.content-loader tr td {
white-space: nowrap;
}
I would also remove the fixed width from the container (or add overflow-x: scrollto the container) if you want the fields to display in their entirety without it looking odd...
overflow-x: scroll如果您希望字段完整显示而不会看起来很奇怪，我也会从容器中删除固定宽度（或添加到容器中）...
See more here: http://www.w3schools.com/cssref/pr_text_white-space.asp
在此处查看更多信息：http: //www.w3schools.com/cssref/pr_text_white-space.asp
回答by NerdNeo
Use this style attribute for no word wrapping:
使用此样式属性不换行：
white-space: nowrap;
回答by warch
you could also use display: tableinsted of tables. Divs are way more flexible than tables.
你也可以使用display: table插入的表格。Div 比表格更灵活。
Example:
例子：
.table {
display: table;
border-collapse: collapse;
}
.table .table-row {
display: table-row;
}
.table .table-cell {
display: table-cell;
text-align: left;
vertical-align: top;
border: 1px solid black;
}<div class="table">
<div class="table-row">
<div class="table-cell">test</div>
<div class="table-cell">test1123</div>
</div>
<div class="table-row">
<div class="table-cell">test</div>
<div class="table-cell">test123</div>
</div>
</div>