it-swarm.com.ru

тд ширина, не работает?

Итак, у меня есть этот код здесь:

<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, так и на ПК, но кто-то жалуется, что td с width 200 постоянно меняет ширину. Я понятия не имею, о чем он говорит. Кто-нибудь знает, почему он или она видит изменение ширины td?

66
user979331

Так должно быть:

<td width="200">

или же

<td style="width: 200px">

Обратите внимание, что если ваша ячейка содержит некоторый контент, который не помещается в 200px (например, somelongwordwithoutanyspaces), ячейка все равно растянется, если ваш CSS не содержит table-layout: fixed для таблицы.

РЕДАКТИРОВАТЬ

Как отметила Кристина Чайлдс в своем ответе, вам следует избегать как атрибута width, так и использования встроенного CSS (с атрибутом style). Хорошей практикой является как можно большее разделение стиля и структуры.

100
bfavaretto

Ширина и/или высота в таблицах больше не являются стандартными; как говорит Янцз, они устарели. Вместо этого лучший способ сделать это - поместить в ячейку таблицы элемент блока, который будет держать ячейку открытой до желаемого вами размера:

<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