HTML Таблица ширины в процентах, строки таблицы разделены поровну - PullRequest
Новая
       10

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

27 голосов
/ 09 октября 2011

Когда я создаю таблицу в формате 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>

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

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

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

Ответы [ 5 ]

33 голосов
/ 25 декабря 2012

Используйте свойство 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>, который не требует повторения стиля для данных таблицы или предоставления таблицы идентификатора для использования в таблице стилей. Я думаю, что достаточно установить ширину в первом ряду.

23 голосов
/ 09 октября 2011

Вам необходимо ввести ширину% для каждой ячейки.Но подождите, есть лучший способ сделать это, он называется 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 голосов
/ 09 октября 2011

вы можете попробовать это, я бы сделал это с помощью 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>
2 голосов
/ 09 октября 2011

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

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

table.className td { width: 25%; }
1 голос
/ 03 июня 2015

Это, безусловно, самый чистый ответ на вопрос: https://stackoverflow.com/a/14025331/1008519. В сочетании с table-layout: fixed я часто нахожу <colgroup> отличный инструмент, чтобы заставить столбцы работать так, как вы хотите (см. codepen здесь ): 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...