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

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

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

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

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

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

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

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

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

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

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

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

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

Поместите таблицу в отдельный блок 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;
}

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

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

<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>