如何根据内容自动调整表格 td 宽度答案

【问题标题】：How to auto adjust table td width from the content如何根据内容自动调整表格 td 宽度
【发布时间】：2014-03-05 03:17:39
【问题描述】：

首先请尝试查看此jsFiddle，如您所见，我有一个包含很多列的表格我唯一的问题是如何使所有td 调整其宽度，具体取决于里面的文本有多长不用换行吗？

这是我的 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>

这是我的 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 {

}

有人可以帮我解决这个问题吗？或者，如果这里已经有人问过，请给我看链接。

【问题讨论】：

删除所有宽度并添加 .content-loader table tr td { white-space: nowrap; } ?
由于容器的宽度是固定的，因此容器内部的字段太多而无法正确容纳。如果你有更少，它可能会自行调整。

标签： html css html-table

【解决方案1】：

删除所有使用 CSS 设置的宽度并将空白设置为 nowrap，如下所示：

.content-loader tr td {
    white-space: nowrap;
}

如果您希望字段完整显示而不会看起来很奇怪，我也会从容器中删除固定宽度（或将overflow-x: scroll 添加到容器中）...

在此处查看更多信息：http://www.w3schools.com/cssref/pr_text_white-space.asp

【讨论】：

【解决方案2】：

使用此样式属性不换行：

white-space: nowrap;

【讨论】：

【解决方案3】：

您也可以使用display: table insted 表格。 div 比表格更灵活。

例子：

.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>

【讨论】：