web-dev-qa-db-ja.com

テーブル幅の設定

次のように受信トレイに使用される簡単なテーブルがあります。

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

FromとDateがページ幅の15％でSubjectが70％になるように幅を設定するにはどうすればよいですか。私はまたテーブルが全ページ幅を占めるようにしたい。

htmlcsshtml-table
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

スタイルを1つのクラスで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>

もっと最近では、CSS 3（IE9 +）のnth-child()セレクターも使えます。隣接するセレクターと一緒にそれらをストリングにするのではなく、それぞれの列を括弧に入れます。このように、例えば：

<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

あなたの体（またはあなたのテーブルを包んでいるdiv）の設定に応じて、あなたはこれを行うことができるはずです：

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

これらは私の2つの提案です。

  1. クラスを使う他の2つの列の幅はブラウザによって自動的に15％に設定されるので、指定する必要はありません。

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

  2. クラスを使わずに。 3つの異なる方法が結果は同じです。

    a）

        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>

    b）

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

    c）これは私のお気に入りです。 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
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

:nth-childなどのセレクタをサポートしていない古いブラウザでも動作するCSSでこれを実行するもう1つの最小限の方法は次のとおりです。 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