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

смотрите 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, если таковые имеются? Я ищу причину больше, чем исправление. Я надеюсь понять, как это работает.

td width is not 300px as desired

97
css html table

11 ответов

это может быть не то, что вы хотите услышать, но display: table-cell не уважает ширину и будет свернут на основе ширины всей таблицы. Вы можете обойти это легко, просто имея display: block элемент внутри самой ячейки таблицы, ширину которой вы указываете, e.g

<td><div style="width: 300px;">wide</div></td>

это не должно иметь большого значения, если - это position: fixed или абсолютный, потому что положение ячеек все статические относительно таблица.

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

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

140

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

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

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

здесь он применяется к исходному примеру: JSFIDDLE, вы заметите, что остальные столбцы раздавлены и перекрывают их содержимое. Мы можем исправить это с помощью еще нескольких CSS (все, что мне нужно было сделать, это добавить класс в первый TR):

    table {
        width: 100%;
        table-layout: fixed;
    }

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

    td.rhead {
        width: 300px
    }

видел в действии здесь: JSFIDDLE

26

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

Если вы хотите заставить столбцы соответствовать, попробуйте установить:

body {min-width:4150px;}

см. мой jsfiddle:http://jsfiddle.net/Mkq8L/6/ @mike я пока не могу комментировать.

11

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

вот например, Я дал таблице ширину 5000px, которая, как я думал, будет соответствовать вашим требованиям.

table{
    width:5000px;
}

это тот же самый код, который вы предоставили, который я просто добавил в ширину таблицы.

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

7

попробуйте это работать.

<table>
<thead>
<tr>
<td width="300">need 300px</td>
5

попробуйте использовать

table {
  table-layout: auto;
}

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

5

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

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

используйте свойство компоновки таблицы и "фиксированное" значение в таблице.

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

3

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

2

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

HTML-код:

<td><div class="rhead">a little space</div></td>

CSS:

.rhead {
  width: 300px;
}

здесь jsfiddle.

2

вы также можете использовать:

.rhead {
    width:300px;
}

но это только с некоторыми браузерами, если я правильно помню, IE8 не допустить этого. Более того, безопаснее всего просто поставить .

1