Як я можу встановити максимальну ширину комірки таблиці за допомогою відсотків?

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

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

Сказане не працює. Як я можу встановити максимальну ширину комірки таблиці за допомогою відсотків?

Відповідно до визначення максимальної ширини в специфікації CSS 2.1, "ефект" мінімальної ширини "та" максимальної ширини "на таблиці, вбудовані таблиці, комірки таблиці, стовпці та групи стовпців не визначений". Таким чином, ви не можете безпосередньо встановити максимальну ширину для елемента 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, а потім встановіть ширину, min-ширину та / або max-ширину діла за бажанням для всієї таблиці. Тоді ви можете працювати та встановлювати ширину та мінімальну ширину для інших комірок, а максимальну ширину для діва, ефективно працюючи навколо та назад, щоб досягти бажаної максимальної ширини.

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