Налаштування ширини стовпців таблиці


202

У мене проста таблиця, яка використовується для папки "Вхідні":

<table border="1">
        <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
        </tr>

Як встановити ширину, щоб "Від" і "Дата" становили 15% від ширини сторінки, а "Тема" - 70%. Я також хочу, щоб таблиця займала всю ширину сторінки.

Відповіді:


319

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    
    
    
    <!-- Put <thead>, <tbody>, and <tr>'s here! -->
    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>


5
Як і чистота цього розчину. Однак, будь ласка, закрийте кол, наприклад, <col span = "1" style = "width: 15%;" /> або <col span = "1" style = "width: 15%;"> </col>
lsu_guy

23
@Isu_guy ви закриваєте <col> лише під час використання XHTML - у HTML тег <col> не має закриття ... див. Посилання для отримання додаткової інформації. У HTML5 <col> є недійсним елементом, тобто НЕ МОЖЕ бути закритим
Matija Nalis

4
@Zulu відповідно до w3schools.com/tags/att_col_width.asp "Атрибут <col> width не підтримується в HTML5."
Caltor

30
@Caltor: у коді не використовується <col> width attribute; він використовує a CSS *style* width, який замінив атрибут <col> width. (незважаючи на те, що цей коментар є декількома людьми!)
ToolmakerSteve

4
span="1"є зайвим, оскільки 1 є типовим.
Madbreaks

128

HTML:

<table>
  <thead>
    <tr>
      <th class="from">From</th>
      <th class="subject">Subject</th>
      <th class="date">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[from]</td>
      <td>[subject]</td>
      <td>[date]</td>
    </tr>
  </tbody>
</table>

CSS:

table {
  width: 100%;
  border: 1px solid #000;
}
th.from, th.date {
  width: 15%
}
th.subject {
  width: 70%; /* Not necessary, since only 70% width remains */
}

Найкраща практика полягає в тому, щоб тримати HTML та CSS окремо, щоб зменшити дублювання коду та розділити проблеми (HTML для структури та семантики та CSS для презентації).

Зауважте, що для роботи в старих версіях Internet Explorer, вам, можливо, доведеться надати вашій таблиці певну ширину (наприклад, 900 пікселів). У цьому браузері є деякі проблеми з рендеруванням елемента з розмірами відсотків, якщо його обгортка не має точних розмірів.


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

3
Добре, тому що <col width = ""> застаріло в HTML5: developer.mozilla.org/en/docs/Web/HTML/Element/col
Річард,

30

Використовуйте наведений нижче CSS. Перша декларація забезпечить дотримання вашої таблиці ширини (вам потрібно буде додати класи у своєму HTML):

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}

Насправді потрібно лише вказати ширину двох стовпців. Третій буде розрахований автоматично, і цього table{table-layout:fixed};.from,.date{width:15%}достатньо. Якщо класи не використовуються і для інших елементів, написання th.fromє зайвим і його можна скоротити до просто .from.
tomasz86

14

Альтернативний спосіб за допомогою лише одного класу, зберігаючи ваші стилі у файлі CSS, який працює навіть у IE7:

<table class="mytable">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>
<style>
    .mytable td, .mytable th { width:15%; }
    .mytable td + td, .mytable th + th { width:70%; }
    .mytable td + td + td, .mytable th + th + th { width:15%; }
</style>

Зовсім недавно ви також можете використовувати nth-child()селектор з CSS3 (IE9 +), де ви просто поставили nr. відповідного стовпчика в круглі дужки замість того, щоб їх вставляти разом із сусіднім селектором. Як ось це, наприклад:

<style>
    .mytable tr > *:nth-child(1) { width:15%; }
    .mytable tr > *:nth-child(2) { width:70%; }
    .mytable tr > *:nth-child(3) { width:15%; }
</style>

Пропоноване :nth-childрішення жахливе з точки зору продуктивності. Немає поважних причин використовувати його (особливо з універсальним селектором) у цьому прикладі, коли для стилю є лише три елементи ( thабо col). Крім того, потрібно лише встановити ширину до thпершого рядка. .mytable tdУ першому прикладі є зайвим.
tomasz86

"Пропоноване рішення: nth-child є жахливим з точки зору продуктивності". - необхідне цитування.
DanMan

Цього має бути достатньо: Ефективна візуалізація CSS . При використанні універсального селектора браузер спочатку перевірить ВСІ елементи, чи не є вони дочірньою частиною іншого елемента, потім, якщо їх прямий батьків є, trа потім належать їм .mytable. Якщо ви дійсно хочете використовувати «NTH» , то що - щось на зразок цього, ймовірно , буде набагато краще: .mytable th:nth-of-type(1) {width: 15%}; .mytable th:nth-of-type(2) {width: 70%};. У цьому випадку також не потрібно вказувати ширину третього стовпця.
tomasz86

Особисто я би використовував заняття чи просто .mytable th+th{width: 70%}.mytable th+th+th{width:15%}. Самі "n" селектори можуть бути дуже корисними, але в цьому конкретному випадку (крихітна таблиця із лише 3 стовпцями) насправді не потрібна. При використанні table-layout: fixedви можете навіть зробити саме це: table{table-layout:fixed}th:first-child+th{width:70%}.
tomasz86

Я про це знаю. Але ці статті є з років тому, і сьогодні у селекторів CSS є більші проблеми, як величезна кількість зображень та JS-код.
DanMan

8

Це мої дві пропозиції.

  1. Використання занять. Не потрібно вказувати ширину двох інших стовпців, оскільки браузер їх встановлюватиме автоматично на 15%.

        table { table-layout: fixed; }
        .subject { width: 70%; }
        <table>
          <tr>
            <th>From</th>
            <th class="subject">Subject</th>
            <th>Date</th>
          </tr>
        </table>

  2. Без використання занять. Три різні методи, але результат однаковий.

    а)

        table { table-layout: fixed; }
        th+th { width: 70%; }
        th+th+th { width: 15%; }
        <table>
          <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
          </tr>
        </table>

    б)

        table { table-layout: fixed; }
        th:nth-of-type(2) { width: 70%; }
        <table>
          <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
          </tr>
        </table>

    в) Цей мій улюблений. Те саме, що і b), але з кращою підтримкою браузера.

        table { table-layout: fixed; }
        th:first-child+th { width: 70%; }
        <table>
          <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
          </tr>
        </table>


5

Залежно від вашого тіла (або дива, який обгортає ваш стіл) "налаштувань", ви повинні зробити це:

body {
  width: 98%;
}

table {
  width: 100%;
}


th {
  border: 1px solid black;
}


th.From, th.Date {
  width: 15%;
}

th.Date {
  width: 70%;
}


<table>
  <thead>
    <tr>
      <th class="From">From</th>
      <th class="Subject">Subject</th>
      <th class="Date">Date</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>Me</td>
       <td>Your question</td>
       <td>5/30/2009 2:41:40 AM UTC</td>
     </tr>
   </tbody>
</table>

Демо



4
<table>
  <col width="130">
  <col width="80">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Демо


8
Атрибут ширини стовпчика не підтримується в HTML5.
Руна

4

Спробуйте це замість цього.

<table style="width: 100%">
    <tr>
        <th style="width: 20%">
           column 1
        </th>
        <th style="width: 40%">
           column 2
        </th>
        <th style="width: 40%">
           column 3
        </th>
    </tr>
    <tr>
        <td style="width: 20%">
           value 1
        </td>
        <td style="width: 40%">
           value 2
        </td>
        <td style="width: 40%">
           value 3
        </td>
    </tr>
</table>

3

Не використовуйте атрибут border, використовуйте CSS для всіх своїх стильових потреб.

<table style="border:1px; width:100%;">
    <tr>
            <th style="width:15%;">From</th>
            <th style="width:70%;">Subject</th>
            <th style="width:15%;">Date</th>
    </tr>
... rest of the table code...
</table>

Але таке вбудовування CSS є поганою практикою - замість цього слід використовувати класи CSS та розміщувати правила CSS у зовнішньому файлі CSS.


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

2

Ось ще один мінімальний спосіб зробити це в CSS, який працює навіть у старих браузерах, які не підтримують :nth-childі подібні селектори: http://jsfiddle.net/3wZWt/ .

HTML:

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>Dmitriy</td>
        <td>Learning CSS</td>
        <td>7/5/2014</td>
    </tr>
</table>

CSS:

table {
    border-collapse: collapse;
    width: 100%;
}

tr > * {
    border: 1px solid #000;
}

tr > th + th {
    width: 70%;
}

tr > th + th + th {
    width: 15%;
}

2

Додати тег таблиці після таблиці. Визначте ширину та кількість стовпців тут. і додати тег tbody. Покладіть трійку всередину теді.

<table>
    <colgroup>
       <col span="1" style="width: 30%;">
       <col span="1" style="width: 70%;">
    </colgroup>


    <tbody>
        <tr>
            <td>First column</td>
            <td>Second column</td>
        </tr>
    </tbody>
</table>

0
style="column-width:300px;white-space: normal;"

Привіт - Ласкаво просимо до Stack Overflow. Загалом, відповіді з текстом (замість просто коду) та деякими поясненнями розглядаються як краще, ніж просто відповіді, що стосуються лише коду. Оскільки це запитання старіше і має багато інших відповідей, вони можуть допомогти вам в подальшому відповіді.
jwheron
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.