Почему CSS td width не работает?

Question

Почему CSS td width не работает?

смотрите JSFIDDLE

td.rhead { width: 300px; }

почему не работает ширина CSS?

<table>

<thead>

<tr>

<td class="rhead">need 300px</td>

<td colspan="7">Week #0</td>

<td colspan="7">Week #1</td>

<!-- etc..-->

</tr>

<tr>

<td class="rhead"></td>

<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>

<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>

<!-- etc... -->

</tr>

<thead>

</table>

также, что влияния положения: фиксированный, абсолютный ЕТК имеют на ширинах тд если любые? Я ищу причину больше, чем исправление. Я надеюсь понять, как это работает.

td width is not 300px as desired

2040 11

html css table

11 ответов:

Comments

Ничего не найдено.

Explosion Pills · Accepted Answer · 2013-02-08 06:58:14

это может быть не то, что вы хотите услышать, но display: table-cell не учитывает ширину и будет свернут на основе ширины всей таблицы. Вы можете легко обойти это, просто имея display: block элемент внутри самой ячейки таблицы, ширину которой вы указываете, например
<td><div style="width: 300px;">wide</div></td>
это не должно иметь большого значения, если <table> сам по себе position: fixed или абсолютный, потому что положение ячеек все статические относительно стол.

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

EDIT: я не могу взять кредит, но, как говорят комментарии, Вы можете просто использовать min-width вместо width вместо этого в ячейке таблицы.

Hugo Yates · Accepted Answer · 2014-09-17 12:33:34

вам лучше использовать table-layout: fixed

авто значение по умолчанию и с большими таблицами может вызвать немного задержки на стороне клиента в браузере перебирает его, чтобы проверить все размеры подходят.

основные намного лучше и быстрее отображается на странице. Структура таблицы зависит от общей ширины таблиц и ширины каждого из столбцов.

здесь он применяется к исходному примеру: JSFIDDLE, вы заметите, что остальные столбцы дробятся и перекрывают их содержимое. Мы можем исправить это с помощью еще нескольких CSS (все, что мне нужно было сделать, это добавить класс в первый TR):
    table {
        width: 100%;
        table-layout: fixed;
    }

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }
видел в действии здесь: JSFIDDLE

Matthew Brown · Accepted Answer · 2013-02-08 07:00:22

причина, по которой он не работает в ссылке, которую вы предоставили, заключается в том, что вы пытаетесь отобразить столбец 300px плюс 52 столбца, охватывающих 7 столбцов каждый. Сократите количество столбцов, и это работает. Вы не можете поместиться так много на экране.

Если вы хотите, чтобы заставить столбцы соответствовать попробуйте установить:
body {min-width:4150px;}
смотрите мой jsfiddle:http://jsfiddle.net/Mkq8L/6/ @Майк я пока не могу комментировать.

He Hui · Accepted Answer · 2013-02-08 07:03:16

причина в том, что вы не указали ширину таблицы, и вся ваша куча td переполнена.

вот например, Я дал таблице ширину 5000px, которая, как я думал, будет соответствовать вашим требованиям.
table{
    width:5000px;
}
это тот же самый код, который вы предоставили, который я просто добавил в ширину таблицы.

Я считаю, что происходит, потому что ваши TD-это путь мимо ширины таблицы по умолчанию. Которые вы могли видеть, если вы вытаскиваете около 45 ваших td в каждом tr, (т. е. код, который вы предоставили в своем вопросе, а не jsfiddle) он работает точно отлично

amirali shahinpour · Accepted Answer · 2013-02-08 06:46:46

попробуйте это он работает.
<table>
<thead>
<tr>
<td width="300">need 300px</td>

sambrmg · Accepted Answer · 2018-10-02 21:49:48

попробуйте использовать
table {
  table-layout: auto;
}
Если вы используете Bootstrap, class table и table-layout: fixed; по умолчанию.

mathewsun · Accepted Answer · 2014-02-18 15:39:13

мое сумасшедшее решение.)

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});

Cyan Baltazar · Accepted Answer · 2016-12-28 07:52:30

используйте свойство table-layout и "фиксированное" значение на вашей таблице.
table {
   table-layout: fixed;
   width: 300px; /* your desired width */
}
после настройки всей ширины таблицы теперь можно настроить ширину в % от td.
td:nth-child(1), td:nth-child(2) {
   width: 15%;  
}
вы можете узнать больше об этом по этой ссылке:http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Dally S · Accepted Answer · 2016-10-07 12:30:18

Если ширина таблицы, например, 100%, попробуйте использовать процентную ширину на td, например, 20%.

simhumileco · Accepted Answer · 2017-04-05 15:17:49

обернуть содержимое из первой ячейки в div например, так:

HTML:
<td><div class="rhead">a little space</div></td>
CSS:
.rhead {
  width: 300px;
}
здесь jsfiddle.

michaelcurry · Accepted Answer · 2014-02-24 10:01:52

вы также можете использовать:
.rhead {
    width:300px;
}
но это только с некоторыми браузерами, если я правильно помню, IE8 не допустить этого. Поверх всего, безопаснее просто поставить