Таблиця зі 100% шириною зі стовпцями однакового розміру

79

Мені потрібно динамічно створювати таблицю зі змінною кількістю стовпців, визначеною під час виконання.

Хтось може сказати мені, чи можливо мати таблицю html із однаково розмірними стовпцями, які повністю розтягнуті?

html css

5

Відповідь внизу (з великою кількістю голосів) слід позначити як прийняту відповідь, оскільки вона є більш правильною і універсально вирішує проблему.

— Micros

1

І не покладається на те, що ви маєте точний вміст, як перша відповідь.

— Fredy31

58

<table width="400px">
  <tr>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  </tr>
</table>

Для змінної кількості стовпців використовуйте%

<table width="100%">
  <tr>
  <td width="(100/x)%"></td>
  </tr>
</table>

де 'x' - кількість стовпців

— Саліл
джерело

4

+1 для другого підходу. Але 400 що, ноги? Дюймів? Сантиметри? Піксель? Використовуйте одиниці виміру. :)

— ANeves вважає, що SE є злим

2

Саме в цьому суть. Перший приклад байдужий до використовуваної одиниці.

— Carlos Melo

2

Чи враховує це кордони tr і tds? Гадаю, ні.

— Нінад,

Я помилився .. Я щойно спробував це .. це спрацювало .. У мене є td кордони для 32 стовпців.

— Ninad,

4

Дублікат stackoverflow.com/questions/5055299/…, де була розміщена цікава відповідь.

— Альберто

202

Якщо ви не знаєте, скільки стовпців у вас буде, декларація

table-layout: fixed

поряд з НЕ встановлюючи будь - яких ширину стовпців , не означатиме , що браузери ділять загальну ширину рівномірно - незалежно від того , що.

Це також може бути проблемою з цим підходом, якщо ви використовуєте його, вам слід також розглянути спосіб обробки переповнення.

— оршацький
джерело

Я хотів би застосувати такий підхід для повноекранної таблиці без переповнення. скільки стовпців він створив? Ви можете налаштувати демонстрацію, щоб краще це зрозуміти?

— ProgramCpp

3

jsfiddle.net/5babcvg4 Ви створюєте таблицю зі скільки завгодно стовпців, а потім додаєте декларацію до таблиці.

— orszaczky

16

Зверніть увагу, що ширина таблиці повинна бути встановлена (наприклад width: 100%;).

— Skippy le Grand Gourou

1

Ідеальне рішення.

— Сергі

7

ВСЕ, ЩО ТРЕБА ЗРОБИТИ:

HTML:

<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>

CSS:

#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/

якщо у вас є, thвам потрібно встановити його так:

#my-table th{width:2000px;}

— аройкос
джерело

2

у мене це не працює. Ви можете навести робочий приклад?

— Міхал Рибак,

працює зараз - я вже спробував td { width: 100% }підхід раніше, і це не спрацювало, але 2000pxпрацює добре.

— Міхал Рибак,

Це найкраща відповідь, навіть якщо HTML / CSS працює огидно.

— Чарльз Гудвін,

Це не буде працювати, якщо у вас є very_long_words, або якщо ваш рядок містить <pre>Some long text</pre>. З усіх відповідей тут table-layout: fixedна мене працював лише Оршацький .

— Conchylicultor

1

table {
    width: 100%;

    th, td {
        width: 1%;
    }
}

Синтаксис SCSS

— С. Естевес
джерело

1

Просто додайте style="table-layout: fixed ; width: 100%;"внутрішній <table>тег, а також, якщо ви не вказали жодних стилів і додайте просто style=" width: 100%;"всередині, <table>ви зможете його вирішити.

— Сінет Лакшита
джерело