web-dev-qa-db-ja.com

td幅、機能していませんか？

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

<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の両方のすべてのブラウザでテストしましたが、誰かがtdが200のwidthの幅を変え続けると不平を言っています。彼が何について話しているのか分かりません。 tdで幅の変化が見られる理由を誰もが知っていますか？

htmlcsshtml-tablewidth
66
user979331

そのはず：

<td width="200">

または

<td style="width: 200px">

セルに200pxに収まらないコンテンツ（somelongwordwithoutanyspacesなど）が含まれている場合でも、CSSにテーブルのtable-layout: fixedが含まれていない限り、セルは伸びます。

編集

クリスティーナの子供たちが彼女の答えで述べたように、width属性とインラインCSS（style属性を使用）の両方を避ける必要があります。スタイルと構造をできるだけ分離することをお勧めします。

100
bfavaretto

テーブルの幅や高さはもはや標準ではありません。 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;
}
23
kristina childs
 <table style="table-layout:fixed;">

これにより、スタイル設定された幅<td>が強制されます。テキストがいっぱいになると、他の<td>テキストとオーバーラップします。そのため、メディアクエリを使用してみてください。

16
mateostabio

テーブルのwidth/height属性に単位を指定することはできません。これらは常にピクセル単位ですが、廃止されているため使用しないでください。

7
lanzz

<td>タグcss内で使用できます：display:inline-block

好き：<td style="display:inline-block">

5
Siddharth Shukla

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

table-layout: fixed;
width: 150px;

150pxまたはご希望の幅。

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

4
Cyan Baltazar

使用してみてください

Word-wrap: break-Word;

この助けを願っています

3
Med7at

これを試して：

Word-break: break-all;
1
Masoud HB

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

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>[email protected]</td>
    </tr>
</table>

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

0
Nick Woodhams