Сделать таблицу шириной 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%;">&nbsp;</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>&nbsp;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;">&nbsp;</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>&nbsp;</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>&nbsp;</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>