it-roy-ru.com

Использование 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

102
Jake

Возможно, это не то, что вы хотите услышать, но 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 в ячейке таблицы.

142
Explosion Pills

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

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

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

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

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

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

    td.rhead {
        width: 300px
    }

Видно в действии здесь: JSFIDDLE

27
Hugo Yates

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

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

body {min-width:4150px;}

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

11
Matthew Brown

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

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

table{
    width:5000px;
}

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

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

8
He Hui

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

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

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

table {
  table-layout: auto;
}

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

5
sambrmg

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

table {
   table-layout: fixed;
   width: 300px; /* your desired width */
}

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

td:nth-child(1), td:nth-child(2) {
   width: 15%;  
}

Вы можете узнать больше об этой ссылке: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

4
Cyan Baltazar

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

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

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

2
Dally S

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

HTML:

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

CSS:

.rhead {
  width: 300px;
}

Вот это jsfiddle .

2
simhumileco

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

.rhead {
    width:300px;
}

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

1
michaelcurry