2

次のようにレイアウトされるように、html でテーブルのスタイルを設定するにはどうすればよいですか。

<-       full page width             ->
<-20px->< dynamic ><-20px->< dynamic  >
+------------------+-------------------+
¦ A                ¦ B                 ¦ header row 1
+-------+----------+-------+-----------+
+ A1    ¦ A2       ¦ B1    ¦ B2        ¦ header row 2
+-------+----------+-------+-----------+
¦ a1      a2         b1      b2        ¦ data rows

グループ化ヘッダー行がなければ、次のようにします。

<table style="width:100%; table-layout:fixed;">
  <tr>
    <th style="width:20px;">A1</th>
    <th style="           ">A2</th>
    <th style="width:20px;">B1</th>
    <th style="           ">B2</th>
  </tr>
  <tr>
    <td>a1</td>
    <td>a2</td>
    <td>b1</td>
    <td>b2</td>
  </tr>
</table>

これはうまく機能します。ブラウザー ウィンドウのサイズを変更すると、明示的な幅のない 2 つの列が使用可能なスペースを占有し、2 つの固定列は指定された幅のままになります。

しかし、グループ化ヘッダー行を追加すると、テーブルに 2 つの固定列と 2 つの調整可能な列があるように幅を割り当てる方法が見つかりませんでした。

4

4 に答える 4

2

I can only test it on one browser here, but removing the table-layout fixs it here.

<table style="width:100%;">
  <tr>
    <th colspan="2">A</th>
    <th colspan="2">B</th>
  </tr>
  <tr>
    <th style="width: 20px;">A1</th>
    <th>A2</th>
    <th style="width: 20px;">B1</th>
    <th>B2</th>
  </tr>
  <tr>
    <td style="width: 20px;">a1</td>
    <td>a2</td>
    <td style="width: 20px;">b1</td>
    <td >b2</td>
  </tr>
</table>

Some browser do seem to have problems: Internet Explorer 8 table cell width bug with colspan set

于 2013-10-16T18:27:43.623 に答える
2

CSS を介して幅を使用および設定することをお勧めし<colgroup />ます (可能な限りインライン スタイルを使用しないでください)。colspanご覧のとおり、関与する場合は各列の幅を設定する必要がありますが、HTML/CSS では実際には問題になりません。

CSS

table{
    width:100%;

.narrow{
    width:40px;
}
.dynamic{
    width:auto;
}

HTML

<table>

<colgroup class="narrow"/>
<colgroup class="dynamic"/>
<colgroup class="narrow"/>
<colgroup class="dynamic"/>

<tr>
    <th colspan="2">A</th>
    <th colspan="2">B</th>
</tr>
<tr>
    <th>A1</th>
    <th>A2</th>
    <th>B1</th>
    <th>B2</th>
</tr>

<tr>
    <td>a1</td>
    <td>a2</td>
    <td>b1</td>
    <td>b2</td>
</tr>
[ ... ]

</table>

http://jsfiddle.net/daCrosby/X7TgN/1/

于 2013-10-16T18:58:26.757 に答える
1

あなたの貢献とW3Cドキュメントの検索により、私はこの解決策にたどり着きました:

<table border="1" style="table-layout:fixed; width:100%;">
  <col style="width:20px;">
  <col style="width:50%;">
  <col style="width:20px;>
  <col style="width:50%;>
  <tr>
    <th colspan="2">A</th>
    <th colspan="2">B</th>
  </tr>
  <tr>
    <th>A1</th>
    <th>A2</th>
    <th>B1</th>
    <th>B2</th>
  </tr>
  <tr>
    <td>a1</td>
    <td>a2</td>
    <td>b1</td>
    <td>b2 very long text</td>
  </tr>
</table>

table-layout:fixed は、列幅を指定どおりにする必要があります。それ以外の場合、幅はセルの内容から計算されます。この例では問題ありませんが、実際には問題があります。

固定レイアウトでは、col 要素がない場合、最初の行が列幅の定義に使用されます。そのため、セル幅は単一のヘッダー行では機能しましたが、グループ化ヘッダーでは機能しませんでした。col 要素を提供することで解決します。

于 2013-10-17T11:10:53.383 に答える
0 
<table style="width:100%; table-layout:fixed;">
  <tr>
   <th colspan="2">A1</th>
   <th colspan="2">A2</th>
  </tr>
   <tr>
   <th colspan="1">A1</th>
   <th colspan="1">A2</th>
   <th colspan="1">B1</th>
   <th colspan="1">B2</th>
  </tr>
   <tr>
   <td colspan="1">a1</td>
   <td colspan="1">a2</td>
   <td colspan="1">b1</td>
   <td colspan="1">b2</td>
  </tr>
  </table>

colspan を使用すると、問題が解決します。上記のものを試してみて、何が得られるか教えてください。

于 2013-10-16T11:37:39.677 に答える