如何从内容中自动调整表格td宽度

Question

首先请尝试看看这个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 {

}

有人可以帮我这个吗？或者如果已经在这里询问过,请告诉我链接.

Answer 1

删除使用CSS设置的所有宽度,并将white-space设置为nowrap,如下所示:

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

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

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

Answer 2

使用此样式属性不进行自动换行:

white-space: nowrap;