114

だから私はここにこのコードを持っています：

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

CSSで

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

私のブラウザでは問題なく動作し、Mac と PC の両方のすべてのブラウザでテストしましたが、200 の が幅を変更し続けるtdと不満を言う人がいます。width彼が何について話しているのか分かりません。で幅の変化が見られる理由を知っている人はいtdますか?

4

14 に答える 14

138

そのはず：

<td width="200">

また

<td style="width: 200px">

セルに 200px に収まらないコンテンツ ( など) が含まれている場合でも、CSS にテーブル用のコンテンツが含まれていないsomelongwordwithoutanyspaces限り、セルは伸びることに注意してください。table-layout: fixed

編集

widthkristina childs が彼女の回答で指摘したように、属性とインライン CSS の使用 (属性を使用)の両方を避ける必要がありstyleます。スタイルと構造をできるだけ分離することをお勧めします。

于 2012-06-18T20:28:56.380 に答える
33

テーブルの幅や高さはもはや標準ではありません。Ianzz が言うように、それらは非推奨です。代わりに、これを行う最善の方法は、テーブル セル内にブロック要素を配置して、セルを目的のサイズで開いたままにすることです。

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

CSS

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}
于 2012-06-18T20:43:52.330 に答える
32 
 <table style="table-layout:fixed;">

これにより、スタイル設定された width が強制されます<td>。テキストがいっぱいになると、他のテキストと重なり<td>ます。メディアクエリを使ってみてください。

于 2016-07-28T15:08:40.240 に答える
7

「table-layout: fixed;」を試すことができます。あなたのテーブルへ

table-layout: fixed;
width: 150px;

150px または希望の幅。

参考： https ://css-tricks.com/fixing-tables-long-strings/

于 2016-11-29T09:01:00.283 に答える
7

You can't specify units in width/height attributes of a table; these are always in pixels, but you should not use them at all since they are deprecated.

于 2012-06-18T20:29:18.143 に答える
2

使ってみてください

word-wrap: break-word;

この助けを願っています

于 2012-12-30T17:39:27.103 に答える
0

Thead の列の幅を調整すると、テーブル全体に影響することに注意してください

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>joe@email.com</td>
    </tr>
</table>

私の場合、thead > tr の幅は table > tr > td の幅を直接オーバーライドしていました。

于 2014-03-28T05:44:10.087 に答える