Сделать таблицу шириной 100% с заполнением последней колонны без сжатия других столбцов.
Можно ли создать таблицу (которая будет иметь динамически созданный текст), например:
ширина таблицы 100% экрана
5 столбцов
последний столбец пуст ( )
первые четыре столбца имеют текст, а их ширина - динамическая
последний столбец - это остаток от ширины
без сжатия текста в первых четырех столбцах
У меня есть это до сих пор, и он сжимает текст, который я пытаюсь избежать:
<table style="width:100%;" border="1">
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four Five</td>
<td>Four Five Six</td>
<td style="width:100%;"> </td>
</tr>
</table>
Я не могу использовать "white-space: nowrap", поскольку я хочу, чтобы текст обернулся, если там было достаточно текста.
Изменить: "Мне бы хотелось, чтобы столбцы [первые четыре] были такой шириной, если бы я удалил атрибут width из тега таблицы. Но все же таблица должна быть на 100% от ширины страницы."
Любые идеи? CSS-решения предпочтительнее!
Ответы
Ответ 1
Вы можете использовать flexbox для достижения этой цели
CSS
table {
width:100%;
border: 1px solid black;
border-collapse: collapse;
}
td + td {
border-left: 1px solid black;
}
tr {
display: flex;
align-items: stretch;
}
td:last-child {
flex: 1;
background: yellow;
display:inline-block;
/* to keep IE happy */
}
FIDDLE ( измените размер окна браузера, чтобы увидеть это в действии)
table {
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
td + td {
border-left: 1px solid black;
}
td:last-child {
background: yellow;
}
<table>
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four FiveThree Four FiveThree Four FiveThree Four FiveThree Four Five</td>
<td>Four Five Six</td>
<td> f</td>
</tr>
</table>
Ответ 2
Просто добавь
table-layout: fixed;
к вашему столу, и все готово.
Предполагая, что ваши тексты в других столбцах не заставляют таблицу шире, чем 100%, ваш последний столбец всегда будет растягиваться, поэтому нет необходимости применять какие-либо значения ширины к <td>.
Ответ 3
Это то, что у меня сработало (в FireFox, Chrome и старой 12.x Opera). Мои таблицы, которые я хотел бы иметь ширину 100% и последний столбец, чтобы заполнить остальные, имеют класс tableList
и здесь CSS:
.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; } /* well, it less than 100% in the end, but this still works for me */
Ниже приведен фрагмент кода:
.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it less than 100% in the end, but this still works for me */
<table class="tableList">
<tr><td>game's</td><td>not</td><td>over</td></tr>
<tr><td>one</td><td>two</td><td>three and more</td></tr>
</table>
Ответ 4
Похоже, вы хотите, чтобы браузер "разумно" определял, насколько широка каждая колонка. Вы хотите, чтобы столбцы были обернуты, но вы не хотите, чтобы их ширины были слишком маленькими. Проблема в том, что, когда он полностью переходит к браузеру, браузер может произвольно выбирать, насколько широка каждая колонка. 10 пикселей? 100 пикселей? Конечно, оба будут действительны, если вы не дадите браузеру никаких подсказок.
Вы можете попробовать min-width и max-width как компромисс для ширины столбцов, который будет динамическим, но в пределах определенного диапазона.
Если возможно, что столбец может быть очень узким (например, если данные в этом столбце состоят из однозначных чисел), то предпочтительнее использовать только максимальную ширину.
Ответ 5
Я решил ту же проблему с помощью max-width = 99% для последнего столбца и дал фиксированные размеры другим столбцам.
<table style='width: 100%' border='1'>
<tr>
<td style='width:60px'><b>Label 1</b></td>
<td style='width:120px;'><b>Label 2</b></td>
<td style='max-width:99%;'><b>Label 3</b></td>
</tr>
</table>
Ответ 6
Возможно, вместо того, чтобы установить последний столбец на 100%, установите его на авто?
<table style="width:100%;" border="1">
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four Five</td>
<td>Four Five Six</td>
<td style="width:auto;"> </td>
</tr>
</table>
Ответ 7
Попробуйте этот метод, может работать для вас.
.myTable {
width: 100%;
}
.myTable td:last-child {
width: auto;
}
<table class="myTable" border="1">
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four Five</td>
<td>Four Five Six</td>
<td> </td>
</tr>
</table>
Ответ 8
Да, это не так сложно, хотя иногда разные браузеры показывают это немного по-другому. На самом деле существует несколько способов сделать это, но это мой любимый. Первые строки - это только список имен полей, а также установка ширины каждого столбца... кроме последнего.
<table style='width: 100%' border='1'>
<tr>
<td style='width:100px;'><b>Label 1</b></td>
<td style='width:120px;'><b>Label 2</b></td>
<td style='width:60px;'><b>Label 3</b></td>
<td style='width:100px;'><b>Label 4</b></td>
<td><b>Label 5</b></td>
</tr>
<!-- insert dynamically generated rows -->
</table>
Я нашел, что это работает хорошо, особенно если вам нужно только одно из полей, которое будет занимать остаток. Все, что вы делаете, задает размеры полей, в которых вы нуждаетесь, и не оставляйте тот, который у вас нет.
Другой способ сделать это - определить классы css с определенной шириной, но это просто другой способ форматирования той же таблицы стилей, действительно!
Ответ 9
Это зависит от технологий, которые у вас есть, но, возможно, вы можете попробовать
/* CSS3 method */
table {
width: 100%;
}
table td:nth-child(-n+4) {
min-width: 25%; /* Or set the minimum PX/Percent width */
}
/* CSS2 without nth-child selector */
table {
width: 100%;
}
table td,
table td + td,
table td + td + td,
table td + td + td + td {
min-width: 25% /* Or set the minimum PX/Percent width */
}
Это должно устанавливать ширину областей содержимого и позволять окончательному столбцу динамически находить свою ширину.
Другим методом может быть сделать что-то подобное, предполагая, что вы можете размещать контент внутри своих таблиц.
/*Markup*/
<table width="100%" border="1">
<tr>
<td>
<div>One</div>
</td>
<td>
<div>Two</div>
</td>
<td>
<div>Three</div>
</td>
<td>
<div>Four</div>
</td>
<td>
<div>Five</div>
</td>
<td>
<div> </div>
</td>
</tr>
</table>
/* CSS3 method */
table {
width: 100%;
}
table td:nth-child(-n+4) div {
min-width: 100px;
}
/* CSS2 without nth-child selector */
table {
width: 100%;
}
table td div,
table td + td div,
table td + td + td div,
table td + td + td + td div {
min-width: 100px;
}
Ответ 10
попробуйте это (Demo)
table {
width:100%;
table-layout: fixed;
}
td:last-child {
background: yellow;
width:200px;
layout:
}
<table border="1">
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four FiveThree Four FiveThree Four FiveThree Four FiveThree Four Five</td>
<td>Four Five Six</td>
<td></td>
</tr>
</table>
Ответ 11
попробуйте это, он будет занимать 100% ширины без сдавливания последнего столбца
<table style="width:100%" border=1>
<tr style="visibility:hidden">
<td width=20%></td>
<td width=20%></td>
<td width=20%></td>
<td width=20%></td>
<td width=20%></td>
</tr>
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four Five</td>
<td>Four Five Six</td>
<td></td>
</tr>
</table>