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

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

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

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

4 64
html css html-table

4 ответа:

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

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

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

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

49

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

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

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

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

70

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

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

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

8

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

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