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

Ответ 1

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

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

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

Настройка, которая для обоих столбцов не будет работать так хорошо, поскольку она имеет тенденцию превращать браузеры в столбцы равной ширине.

Ответ 2

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

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

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

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

Ответ 3

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

Поместите таблицу в свой собственный div, затем установите ширину, минимальную ширину и/или максимальную ширину 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;
}

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

Ответ 4

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

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