1. ホーム
  2. html

[解決済み] td widths, not working?

2022-03-06 19:17:30

質問

そこで、このようなコードを書いてみました。

<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 と共に width の200が幅を変え続けている。何を言っているのかさっぱりわかりません。の幅が変わってしまう理由をご存知の方はいらっしゃいますか? td ?

解決方法は?

そのはずです。

<td width="200">

または

<td style="width: 200px">

ただし、セルに200pxに収まらないコンテンツがある場合(たとえば somelongwordwithoutanyspaces が含まれていない限り、セルは引き伸ばされます。 table-layout: fixed をテーブルのために使用します。

EDIT

kristina childs さんの回答にもあるように、このような場合は width 属性とインライン CSS を使用する (インライン CSS では style 属性を使用します)。スタイルと構造をできるだけ分離するのは良い習慣です。