web-dev-qa-db-ja.com

テーブルレイアウトのあるテーブル：固定;そして、1つの列を広くする方法

だから私はこのスタイルのテーブルを持っています：

table-layout: fixed;

これにより、すべての列が同じ幅になります。 1つの列（最初の列）を広くしてから、残りの列を同じ幅でテーブルの残りの幅を占めるようにします。

それを達成する方法は？

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
  background: #ddd;
  table-layout: fixed;
}

table th, table td {
  border: 1px solid #000;
}

table td.wideRow, table th.wideRow {
  width: 300px;
}
<table class="CalendarReservationsBodyTable">
  <thead>
    <tr>
      <th colspan="97">Rezervovane auta</th>
    </tr>
    <tr>
      <th class="corner wideRow">Auto</th>
      <th class="odd" colspan="4">0</th>
      <th class="" colspan="4">1</th>
      <th class="odd" colspan="4">2</th>
      <th class="" colspan="4">3</th>
      <th class="odd" colspan="4">4</th>
      <th class="" colspan="4">5</th>
      <th class="odd" colspan="4">6</th>
      <th class="" colspan="4">7</th>
      <th class="odd" colspan="4">8</th>
      <th class="" colspan="4">9</th>
      <th class="odd" colspan="4">10</th>
      <th class="" colspan="4">11</th>
      <th class="odd" colspan="4">12</th>
      <th class="" colspan="4">13</th>
      <th class="odd" colspan="4">14</th>
      <th class="" colspan="4">15</th>
      <th class="odd" colspan="4">16</th>
      <th class="" colspan="4">17</th>
      <th class="odd" colspan="4">18</th>
      <th class="" colspan="4">19</th>
      <th class="odd" colspan="4">20</th>
      <th class="" colspan="4">21</th>
      <th class="odd" colspan="4">22</th>
      <th class="" colspan="4">23</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="alignRight wideRow">KE-260 FC - Octavia combi</td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td colspan="16" class="highlighted borderLeft" title="Richard Knop">
        Richard Knop
      </td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td colspan="14" class="highlighted" title="Richard Knop">
        Richard Knop
      </td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
    </tr>
  </tbody>
</table>

jsfiddle： http://jsfiddle.net/6p9K3/

最初の列に注目してください。300px幅にする必要があります。

htmlcssxhtml
66
Richard Knop

最初のセル（したがって列）に幅を与え、残りをデフォルトのautoにすることができます

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
  width: 150px;
}
td+td {
  width: auto;
}
<table>
  <tr>
    <td>150px</td>
    <td>equal</td>
    <td>equal</td>
  </tr>
</table>

または、列の幅を取得する「適切な方法」は、 col element 自体を使用することです

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
}
.wide {
  width: 150px;
}
<table>
  <col span="1" class="wide">
    <tr>
      <td>150px</td>
      <td>equal</td>
      <td>equal</td>
    </tr>
</table>
70
clairesuzy

テーブルレイアウトの重要な点は、列の幅がテーブルの最初の行によって決定されることです。

そう

テーブル構造が次の場合（標準のテーブル構造）

<table>
  <thead>
      <tr>
          <th> First column </th>
          <th> Second column </th>
          <th> Third column </th>        
      </tr>
  </thead>

   <tbody>
      <tr>
          <td> First column </td>
          <td> Second column </td>
          <td> Third column </td>        
      </tr>
  </tbody>

2番目の列に幅を指定する場合

<style> 
    table{
        table-layout:fixed;
        width: 100%;
    }

    table tr th:nth-child(2){
       width: 60%;
     }

</style>

Tdではなくthのスタイルを設定してください。

35
kta

非常に大きなテーブル（数百の行と列）を作成していますか？その場合、ブラウザはtable全体を計算してレンダリングするために最初の行を読み取るだけでよいため、table-layout: fixed;をお勧めします。

ただし、そうでない場合は、table-layout: fixed;をダンプし、次のようにcssを変更することをお勧めします。

table th, table td{
border: 1px solid #000;
width:20px;  //or something similar   
}

table td.wideRow, table th.wideRow{
width: 300px;
}

http://jsfiddle.net/6p9K3/1/

6
Jason Gennaro

あなたができることは次のようなものです（擬似コード）：

<container table>
  <tr>
    <td>
      <"300px" table>
    <td>
      <fixed layout table>

基本的に、テーブルを2つのテーブルに分割し、別のテーブルに含めます。

3
kei