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

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

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

286
alamodey 30 Май 2009 в 06:41

12 ответов

Лучший ответ
<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>
442
Flimm 17 Авг 2017 в 17:52
8
Нравится чистота этого раствора. Однако закройте столбец, например или
 – 
lsu_guy
25 Авг 2013 в 04:22
33
Вы закрываете только при использовании XHTML - в HTML тег не закрывается ... см. ссылка для получения дополнительной информации. В HTML5 является пустым элементом, что означает, что он НЕ ДОЛЖЕН быть закрыт < / а>
 – 
Matija Nalis
31 Авг 2013 в 18:22
5
Согласно w3schools.com/tags/att_col_width.asp "Атрибут ширины не поддерживается в HTML5. "
 – 
Caltor
5 Ноя 2013 в 17:46
40
@Caltor: код не использует width attribute; он использует CSS *style* width, который заменил атрибут ширины . (несмотря на то, что многие люди проголосовали за этот комментарий !!)
 – 
ToolmakerSteve
2 Авг 2014 в 23:02
table {
  width: 100%;
  border: 1px solid #000;
}
th.from, th.date {
  width: 15%
}
th.subject {
  width: 70%; /* Not necessary, since only 70% width remains */
}
<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>

Лучше всего держать ваши HTML и CSS отдельно для уменьшения дублирования кода и разделения задач (HTML для структуры и семантики и CSS для представления).

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

142
Ahmad Shahbaz 6 Июл 2020 в 00:13
Это решение не работает, если у вас есть colspans в первой строке
 – 
mark1234
13 Авг 2015 в 18:52
5
Хорошо, потому что устарело в HTML5: разработчик. mozilla.org/en/docs/Web/HTML/Element/col
 – 
Richard
24 Фев 2017 в 15:19

Используйте приведенный ниже CSS, первое объявление гарантирует, что ваша таблица будет придерживаться указанной вами ширины (вам нужно будет добавить классы в свой HTML):

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}
33
Pete 14 Июн 2011 в 17:40
На самом деле вам нужно указать только ширину двух столбцов. Третий будет рассчитан автоматически, поэтому достаточно table{table-layout:fixed};.from,.date{width:15%}. Если классы не используются также и в других элементах, запись th.from является избыточной и может быть сокращена до просто .from.
 – 
tomasz86
26 Апр 2016 в 04:44
Ой, это table-layout: fixed настоящая ошибка! Этот ответ действительно должен быть выше.
 – 
corwin.amber
18 Июл 2021 в 23:35

Альтернативный способ с использованием всего одного класса с сохранением ваших стилей в файле 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>
17
DanMan 23 Сен 2014 в 16:21
Предлагаемое решение :nth-child ужасно с точки зрения производительности. Нет веских причин использовать его (особенно с универсальным селектором) в этом примере, где есть только три элемента (th или col) для стилизации. Кроме того, вам нужно только установить ширину на th в первой строке. .mytable td в первом примере является избыточным.
 – 
tomasz86
25 Апр 2016 в 19:29
Лично я бы использовал классы или просто .mytable th+th{width: 70%}.mytable th+th+th{width:15%}. Сами селекторы "nth" могут быть очень полезны, но в данном конкретном случае (крошечная таблица всего с 3 столбцами) они действительно не нужны. При использовании table-layout: fixed вы можете сделать даже следующее: table{table-layout:fixed}th:first-child+th{width:70%}.
 – 
tomasz86
26 Апр 2016 в 05:23
Я знаю об этом. Но эти статьи написаны много лет назад, и сегодня есть более серьезные проблемы, связанные с селекторами CSS, такими как огромное количество изображений и JS-код.
 – 
DanMan
26 Апр 2016 в 22:58

В зависимости от вашего тела (или div, который обертывает вашу таблицу) 'settings' вы должны иметь возможность сделать это:

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>

Демо

5
Boris Guéry 30 Май 2009 в 06:54
    table { table-layout: fixed; }
    .subject { width: 70%; }
    <table>
      <tr>
        <th>From</th>
        <th class="subject">Subject</th>
        <th>Date</th>
      </tr>
    </table>
5
Hector David 24 Авг 2016 в 05:46
<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>

Демо

4
Srinivas Erukulla 28 Янв 2015 в 12:35
8
Атрибут ширины столбца не поддерживается в HTML5.
 – 
Rune
22 Июл 2015 в 13:51

Попробуйте вместо этого.

<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>
4
Milan 6 Фев 2016 в 12:18

Не используйте атрибут границы, используйте 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.

3
Etienne Perot 30 Май 2009 в 06:49
1
Я подозреваю, что пример кода, опубликованный OP и полезными stackoverflowians, был сделан для удобства чтения и простоты, а не для поощрения встроенных стилей.
 – 
Tass
21 Июл 2011 в 00:58

Вот еще один минимальный способ сделать это в 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%;
}
3
DRD 5 Июл 2014 в 09:20
style="column-width:300px;white-space: normal;"
-2
jwheron 20 Сен 2018 в 23:27
Привет - добро пожаловать в Stack Overflow. Как правило, ответы с текстом (а не просто кодом) и некоторыми пояснениями считаются лучше, чем ответы, содержащие только код. Поскольку этот вопрос более старый и имеет много других ответов, они могут помочь вам в будущих ответах.
 – 
jwheron
20 Сен 2018 в 23:27

Добавьте colgroup после тега таблицы. Определите здесь ширину и количество столбцов. и добавьте тег tbody. Поместите свой tr внутрь тела.

<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>
3
Abdus Salam Azad 7 Мар 2019 в 09:24