Используя CSS td width absolute, position

Пожалуйста, посмотрите этот 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>

Кроме того, каково влияние position: fixed, absolute и т.д. на ширину td, если таковая имеется? Я ищу причину больше, чем исправление. Я надеюсь понять, как это работает.

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

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

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

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

РЕДАКТИРОВАТЬ: Я не могу взять кредит, но, как говорится в комментариях, вы можете просто использовать min-widthвместо этого widthв ячейке таблицы.

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

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

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

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

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

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

    td.rhead {
        width: 300px
    }

Здесь можно увидеть в действии: JSFIDDLE

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

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

body {min-width:4150px;}

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

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

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

table{
    width:5000px;
}

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

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

Попробуйте, это сработает.

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

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

table {
  table-layout: auto;
}

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

Используйте свойство 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

Мое безумное решение.)

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

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

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

HTML:

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

CSS:

.rhead {
  width: 300px;
}

Вот файл jsfiddle .

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

.rhead {
    width:300px;
}

но это будет только с некоторыми браузерами, если я правильно помню, IE8 не позволяет этого. В целом, безопаснее просто поместить width=""атрибут в <td>себя.