Как установить максимальную ширину ячейки таблицы в процентах?


102
<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

Вышеуказанное не работает. Как установить максимальную ширину ячейки таблицы в процентах?


Пожалуйста, уточните «не работает» .
Sparky

1
Вы должны убедиться, что PARENT вашего td имеет определенную ширину (будь то передача width: 100%; на всем пути от body до вашего td, или вы можете дать родителю (здесь: tr) 1000 пикселей или что угодно . При использовании %% в css он всегда использует точный пиксель, определенный в родительском элементе, а затем преобразует пиксель в %% для дочерних элементов, так как они имеют размер относительно своего родителя.
Филипп Мейснер

Для справки, max-width теперь работает в Safari и Chrome. Я не уверен, как долго он поддерживался.
Джейкоб

Ответы:


71

Согласно определению max-width в спецификации CSS 2.1, «влияние min-width и max-width на таблицы, встроенные таблицы, ячейки таблицы, столбцы таблицы и группы столбцов не определено». Таким образом, вы не можете напрямую установить max-width для элемента td.

Если вы просто хотите, чтобы второй столбец занимал не более 67%, вы можете установить ширину (которая фактически является минимальной шириной для ячеек таблицы) на 33%, например, в примере

td:first-child { width: 33% ;}

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


На самом деле max-width теперь работает в Safari и Chrome. Я не уверен, как долго он поддерживался.
Джейкоб

114

Старый вопрос, который я знаю, но теперь это возможно с помощью свойства css table-layout: fixedв теге таблицы. Ответьте ниже на этот вопрос CSS процентная ширина и переполнение текста в ячейке таблицы

Это легко сделать с помощью table-layout: fixed, но немного сложно, потому что не многие люди знают об этом свойстве CSS.

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

Посмотрите его в действии на обновленной скрипке здесь: http://jsfiddle.net/Fm5bM/4/


2
Спасибо! Я боялся, что фиксированный означает, что он не будет пересчитывать ширину ячеек, для которых ширина не задана, но, к счастью, это не так.
fassl 04

4
В вашем jsfiddle, если я удалю свойства ширины, максимальная ширина по-прежнему не работает, поэтому не уверен, как это решает проблему.
frezq

4
@superphonic Думаю, ты запуталась. Если вы удалите max-widthв этом jsfiddle, ширина останется прежней, поэтому она не задается max-width. Будет понятнее, если вы max-width: 10%сначала замените его на td... вы увидите, что он не изменится. jsfiddle.net/w3f8ey22/1
frezq

4
table-layout: fixed не решает проблему OP. Он не заставляет "минимальную ширину" работать с ячейкой таблицы волшебным образом. Обе ссылочные скрипты не имеют разницы в отображении, если table-layout: fixed удален.
cmerriman

2
этот ответ вводит в заблуждение, поскольку он не имеет отношения к вопросу
Золтан Сюле

9

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

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

<div id="tablediv">
<table width="100%">
 <tr>
  <td class="tdleft">Test</td>
  <td>A long string blah blah blah</td>
 </tr>
</table>
</div>

Затем в ваших стилях введите:

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}
.tdleft {
    width:20%;
    min-width:200px;
}

По общему признанию, это не дает вам «максимальную» ширину ячейки как таковую, но позволяет некоторый контроль, который может работать вместо такой опции. Не уверен, подойдет ли он для ваших нужд. Я знаю, что это сработало для нашей ситуации, когда мы хотим, чтобы часть навигации на странице масштабировалась вверх и вниз до определенной точки, но в наши дни для всех широких экранов.


0

процент должен быть относительно абсолютного размера, попробуйте следующее:

<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
table{width:200px;}
td{width:65%;border:1px solid black;}
</style>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.