Установка ширины столбца таблицы


205

У меня есть простая таблица, которая используется для входящих сообщений следующим образом:

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

Как установить ширину, чтобы От и Дата составляли 15% ширины страницы, а Тема - 70%. Я также хочу, чтобы таблица занимала всю ширину страницы.

Ответы:


318

<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>. (несмотря на то, что несколько человек проголосовали за этот комментарий !!)
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 пикселей). Этот браузер имеет некоторые проблемы с отображением элемента с процентными размерами, если его оболочка не имеет точных размеров.


это решение не работает, если у вас есть colspans в первом ряду
mark1234

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 +), где вы просто поместите номер. соответствующего столбца в скобках вместо того, чтобы связать их вместе с соседним селектором. Вот так, например:

<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 . При использовании универсального селектора браузер сначала проверяет ВСЕ элементы, являются ли они n-ными дочерними элементами другого элемента, затем, если их прямым родителем является, 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>

    в) Это мой любимый. То же, что б), но с лучшей поддержкой браузера.

        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 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 и полезные stackoverflowians, предназначен для удобства чтения и простоты, ни в коем случае не является стимулом для встроенных стилей.
ТАСС

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

Добавьте colgroup после тега таблицы. Определите ширину и номер столбца здесь. и добавьте тег tbody. Поместите свой tr внутрь 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. В общем, ответы с текстом (а не просто с кодом) и некоторым объяснением рассматриваются как лучше, чем просто ответы с кодом. Поскольку этот вопрос старше и имеет много других ответов, они могут помочь вам в будущих ответах.
августа
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.