it-swarm.com.ru

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

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

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

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

173
alamodey
<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>
273
Gordon Gustafson

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

118
Ron DeVera

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

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

Альтернативный способ с одним классом, сохраняя ваши стили в файле 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>
12
DanMan

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

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

Это мои два предложения.

  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
tomasz86
<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

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

3
Etienne Perot

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

<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
Milan

Вот еще один минимальный способ сделать это в 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
DRD
    table { table-layout: fixed; }
    .subject { width: 70%; }
    <table>
      <tr>
        <th>From</th>
        <th class="subject">Subject</th>
        <th>Date</th>
      </tr>
    </table>
2
Hector David

Добавьте 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>
1
Abdus Salam Azad