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

Ответ 1

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

Ответ 2

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

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

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

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

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

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

    td.rhead {
        width: 300px
    }

В действии: JSFIDDLE

Ответ 3

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

Если вы хотите заставить столбцы соответствовать настройке try:

body {min-width:4150px;}

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

Ответ 4

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

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

table{
    width:5000px;
}

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

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

Ответ 5

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

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

Ответ 6

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

table {
  table-layout: auto;
}

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

Ответ 7

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

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

Ответ 8

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

.rhead {
    width:300px;
}

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

Ответ 9

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

Ответ 10

Вы можете попробовать "table-layout: fixed;" к вашей таблице

table-layout: fixed;
width: 150px;

150px или желаемая ширина.

Ссылка: https://css-tricks.com/fixing-tables-long-strings/

Ответ 11

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

Ответ 12

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

HTML:

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

CSS

.rhead {
  width: 300px;
}

Вот jsfiddle.