Ширина таблицы HTML в процентах, строки таблицы разделены одинаково

Когда я создаю таблицу в html, таблицу шириной 100%, если я хочу, чтобы все ячейки (tds) были разделены на равные части, мне нужно ввести ширину% для каждой ячейки? "Я обязан" сделать это?

например:.

<table cellpadding="0" cellspacing="0" width="100%" border="0">
   <tr>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
   </tr>
</table>

ИЛИ также может быть правильной процедурой, а не писать ширину в каждом tds, если я хочу, чтобы каждый из них был разделен одинаково:

<table cellpadding="0" cellspacing="0" width="100%" border="0">
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

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

Ответы

Ответ 1

Вам нужно ввести ширину% для каждой ячейки. Но подождите, там лучший способ сделать это, он называется CSS:

<style>
     .equalDivide tr td { width:25%; }
</style>

<table class="equalDivide" cellpadding="0" cellspacing="0" width="100%" border="0">
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

Ответ 2

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

<table style='table-layout:fixed;'>
    <tbody>
        <tr>
            <td>gobble de gook</td>
            <td>mibs</td>
        </tr>
    </tbody>
</table>

Чтобы просто выбросить его, вы также можете использовать <colgroup><col span='#' style='width:#%;'/></colgroup>, который не требует повторения стиля для данных таблицы или предоставления таблицы id для использования в таблице стилей. Я думаю, что установить ширину в первой строке достаточно, хотя.

Ответ 3

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

Чтобы убедиться, что вы получаете равную ширину для каждой ячейки, вам нужно сделать ее понятной. Либо сделайте это, как у вас, либо используйте CSS.

table.className td { width: 25%; }

Ответ 4

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <body leftmargin=0 rightmargin=0>
      <table cellpadding="0" cellspacing="0" width="100%" border="1" height="350px"> 
         <tr>
            <td width="25%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
         </tr>
      </table> 
   </body>
</html>

Ответ 5

Это, безусловно, самый чистый ответ на вопрос: fooobar.com/info/215797/.... В сочетании с table-layout: fixed я часто нахожу <colgroup> отличный инструмент, чтобы заставить столбцы действовать по вашему желанию (см. codepen here):

table {
 /* When set to 'fixed', all columns that do not have a width applied will get the remaining space divided between them equally */
 table-layout: fixed;
}
.fixed-width {
  width: 100px;
}
.col-12 {
  width: 100%;
}
.col-11 {
  width: 91.666666667%;
}
.col-10 {
  width: 83.333333333%;
}
.col-9 {
  width: 75%;
}
.col-8 {
  width: 66.666666667%;
}
.col-7 {
  width: 58.333333333%;
}
.col-6 {
  width: 50%;
}
.col-5 {
  width: 41.666666667%;
}
.col-4 {
  width: 33.333333333%;
}
.col-3 {
  width: 25%;
}
.col-2 {
  width: 16.666666667%;
}
.col-1 {
  width: 8.3333333333%;
}

/* Stylistic improvements from here */

.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}
table {
  width: 100%;
}
table > tbody > tr > td,
table > thead > tr > th {
  padding: 8px;
  border: 1px solid gray;
}
<table cellpadding="0" cellspacing="0" border="0">
  <colgroup>
    <col /> <!-- take up rest of the space -->
    <col class="fixed-width" /> <!-- fixed width -->
    <col class="col-3" /> <!-- percentage width -->
    <col /> <!-- take up rest of the space -->
  </colgroup>
  <thead>
    <tr>
      <th class="align-left">Title</th>
      <th class="align-right">Count</th>
      <th class="align-left">Name</th>
      <th class="align-left">Single</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
      <td class="align-right">19</td>
      <td class="align-left">Lisa McArthur</td>
      <td class="align-left">No</td>
    </tr>
    <tr>
      <td class="align-left">This is a shorter title</td>
      <td class="align-right">2</td>
      <td class="align-left">John Oliver Nielson McAllister</td>
      <td class="align-left">Yes</td>
    </tr>
  </tbody>
</table>


<table cellpadding="0" cellspacing="0" border="0">
  <!-- define everything with percentage width -->
  <colgroup>
    <col class="col-6" />
    <col class="col-1" />
    <col class="col-4" />
    <col class="col-1" />
  </colgroup>
  <thead>
    <tr>
      <th class="align-left">Title</th>
      <th class="align-right">Count</th>
      <th class="align-left">Name</th>
      <th class="align-left">Single</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
      <td class="align-right">19</td>
      <td class="align-left">Lisa McArthur</td>
      <td class="align-left">No</td>
    </tr>
    <tr>
      <td class="align-left">This is a shorter title</td>
      <td class="align-right">2</td>
      <td class="align-left">John Oliver Nielson McAllister</td>
      <td class="align-left">Yes</td>
    </tr>
  </tbody>
</table>