web-dev-qa-db-ja.com

コンテンツからテーブルのtd幅を自動調整する方法

最初にこれを見てみてください 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 {

}

誰かがこれを手伝ってくれますか？または、ここですでに質問されている場合は、リンクを表示してください。

htmlcsshtml5css3html-table
17
Pengun

CSSを使用して設定されたすべての幅を削除し、次のように空白をnowrapに設定します。

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

また、コンテナから固定幅を削除します（またはoverflow-x: scrollコンテナに）奇妙に見えることなくフィールド全体を表示したい場合...

詳細はこちらをご覧ください： http://www.w3schools.com/cssref/pr_text_white-space.asp

27
Joshua Smickus

Wordの折り返しを行わない場合は、このスタイル属性を使用します。

white-space: nowrap;
9
NerdNeo

テーブルのdisplay: tableを使用することもできます。 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>
2
warch