テーブルの列幅の設定

204

次のように、受信トレイに使用する簡単なテーブルを持っています。

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

開始日と日付がページ幅の15％、件名が70％になるように幅を設定するにはどうすればよいですか。また、テーブルがページ幅全体を占めるようにします。

html  css  html-table 
— アラモディ
ソース

回答:

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 2013
23
@Isu_guy XHTMLを使用する場合、<col>のみを閉じます-HTMLでは、<col>タグは閉じません...詳細については、リンクを参照してください。HTML5では、<col>はvoid要素です。つまり、閉じ
— Matija Nalis 2013
4
w3schools.com/tags/att_col_width.aspによる@Zulu「<col>のwidth属性はHTML5ではサポートされていません。」
— Caltor 2013年
30
@Caltor：コードは<col>を使用していませんwidth attribute。CSS *style* width<col>のwidth属性に代わるを使用しています。（複数の人々がそのコメントに賛成投票しているにもかかわらず!!）
— ToolmakerSteve
4
span="1"1がデフォルトなので、不要です。
— Madbreaks 2017年
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で機能させるには、テーブルに特定の幅（900pxなど）を指定する必要がある場合があります。そのブラウザは、ラッパーが正確な寸法を持たない場合、パーセント寸法の要素をレンダリングする際にいくつかの問題があります。

— ロンデベラ
ソース
最初の行にcolspanがある場合、このソリューションは失敗します
— mark1234
3
<col width = "">はHTML5で廃止されているので良い：developer.mozilla.org/en/docs/Web/HTML/Element/col
— Richard
30

以下のCSSを使用してください。最初の宣言により、テーブルが指定した幅に固定されます（HTMLにクラスを追加する必要があります）。

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}
— ピート
ソース
実際には、2つの列の幅のみを指定する必要があります。3つ目table{table-layout:fixed};.from,.date{width:15%}は自動的に計算されるため、これで十分です。クラスが他の要素でも使用されていない限り、書き込みth.fromは冗長であり、に短縮できます.from。
— tomasz86
14

IE7でも機能するCSSファイルにスタイルを保持しながら、クラスを1つだけ使用する別の方法：

<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）が3つしかないこの例では、これを（特にユニバーサルセレクターとともに）使用する正当な理由はありません。さらに、幅をth最初の行のに設定するだけです。.mytable td最初の例では、冗長です。
— tomasz86 2016
「提案された：nth-​​childソリューションは、パフォーマンスの点で恐ろしいものです。」-引用が必要です。
— DanMan
これで十分です：CSSの効率的なレンダリング。ユニバーサルセレクターを使用すると、ブラウザーは最初にすべての要素をチェックして、それらが別の要素のn番目の子であるかどうか、次に直接の親であるtrかどうか、次にそれらがに属して.mytableいるかどうかをチェックします。「nth」を本当に使用したい場合は、次のようなものがおそらくはるかに優れています.mytable th:nth-of-type(1) {width: 15%}; .mytable th:nth-of-type(2) {width: 70%};。この場合、3番目の列幅を指定する必要もありません。
— 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 2016
私はそれを知っています。しかし、それらの記事は何年も前のものであり、大量の画像やJSコードなど、CSSセレクターには今日より大きな問題があります。
— DanMan
8

これらは私の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>
    スニペットを展開

— tomasz86
ソース
5

あなたの体（またはテーブルをラップしている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>

デモ

— ボリス・ゲリー
ソース
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
col width属性は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と有用なstackoverflowiansが投稿したサンプルコードは、読みやすさと簡潔さのためであり、インラインスタイルを奨励するものではないと思います。
— Tass
2

これは: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%;
}
— DRD
ソース
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;"
— Wut Worawit
ソース
こんにちは-Stack Overflowへようこそ。一般に、（コードだけでなく）テキストを使用した回答と一部の説明は、コードのみの回答よりも優れていると見なされています。この質問は古く、他にも多くの回答があるため、今後の回答の参考になるかもしれません。
— jwheron 2018
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.