html之如何根据内容自动调整表格 td 宽度
powertoolsteam
阅读:2029
2023-11-05 18:46:41
评论:0
首先请试着看看这个jsFiddle ,正如您所看到的,我有一个包含很多列的表格,我唯一的问题是如何让所有 td
根据其中文本的长度调整其宽度而不换行?
这是我的代码:
.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 {}
<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>
有人可以帮我解决这个问题吗?或者,如果这里已经有人问过,请告诉我链接。
请您参考如下方法:
删除所有使用 CSS 设置的宽度,并将空白设置为 nowrap,如下所示:
.content-loader tr td {
white-space: nowrap;
}
如果您希望字段完整显示而不显得奇怪,我还会从容器中删除固定宽度(或将 overflow-x: scroll
添加到容器中)...
在这里查看更多信息:http://www.w3schools.com/cssref/pr_text_white-space.asp
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。