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

Це може бути не те, що ви хочете почути, але 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на комірці таблиці.

Вам краще використовувати table-layout: fixed

Авто - це значення за замовчуванням, і великі таблиці можуть спричинити невелике відставання на стороні клієнта, оскільки браузер перебирає його, щоб перевірити відповідність усіх розмірів.

Виправлено набагато краще і швидше переходить на сторінку. Структура таблиці залежить від загальної ширини та ширини кожного стовпця.

Тут він застосований до оригінального прикладу: JSFIDDLE. Ви зауважите, що решта стовпців розбиваються та перекривають їх вміст. Ми можемо це виправити за допомогою ще декількох CSS (все, що мені потрібно було зробити, це додати клас до першої TR):

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

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

    td.rhead {
        width: 300px
    }

Тут в дії: JSFIDDLE

Причина, що вона не працює у наданому вами посиланні, полягає в тому, що ви намагаєтеся відобразити стовпчик з 300 пікселями PLUS 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 {
   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>себе.