2つのヘッダ、一つのテーブルでのショー応答

Question

。 ...明らかに

#states { 
 
    font-family: "gothic"; 
 
    font-size: 11px; 
 
    color: #000; 
 
    width: 100%; 
 
    margin-top: 5px; 
 
    z-index: 99px; 
 
}

<table id="states" style="overflow-x:auto; margin-left: 40px; margin-top: 4px; padding-right: 10px; border-left: none; border-right: #444242;"> 
 
\t <thead> 
 
\t \t <tr> 
 
\t \t \t <th colspan="1" style="text-align: left; border-radius: 15px 9000px 20px .1px; font-size: 10px; font-family: 'gothic'; background-color: #00508e; border:none; 
 
\t \t \t width: 5cm; padding: 10px; color: white;"> 
 
\t \t \t A 
 
\t \t </th> 
 
\t </tr> 
 
\t <tr style="margin: -0cm -1cm 0cm 1cm;border: 0; border-top: 3px solid #5b5b5e; line-height: 1; z-index: 1; "> 
 
\t \t <th style="font-size:12px; border:left: #444242; border-right: none;"> 
 
\t \t \t a1 
 
\t \t </th> 
 
\t \t <th style="border:none; font-size:12px;"> 
 
\t \t \t b1 
 
\t \t </th> 
 
\t \t <th style="border:none; font-size:12px;"> 
 
\t \t \t c1 
 
\t \t </th> 
 
\t \t <th style="border:none; font-size:12px;"> 
 
\t \t \t d1 
 
\t \t </th> 
 
\t \t <th style="background-color:#d6e7ee; border:none; font-size:12px;"> 
 
\t \t \t e1 
 
\t \t </th> 
 
\t \t <th style="background-color:#d6e7ee; border:none; font-size:12px;"> 
 
\t \t \t f1 
 
\t \t </th> 
 
\t \t <th style="background-color:#d6e7ee; border:none; font-size:12px;"> 
 
\t \t \t g1 
 
\t \t </th> 
 
\t \t <th style="background-color:#d6e7ee; border:none; font-size:12px;"> 
 
\t \t \t h1 
 
\t \t </th> 
 
\t \t <th style="background-color:#d6e7ee; border-left: none; font-size:12px;"> 
 
\t \t \t i1 
 
\t \t </th> 
 
\t </tr> 
 
</thead> 
 
<tbody> 
 
\t <tr style="background-color: #fff; font-size:12px;"> 
 
\t \t <td style="font-size:12px;"> 
 
\t \t \t a2 
 
\t \t </td> 
 
\t \t <td style="font-size:12px;"> 
 
\t \t \t b2 
 
\t \t </td> 
 
\t \t <td style="font-size:12px;"> 
 
\t \t \t c2 
 
\t \t </td> 
 
\t \t <td style="font-size:12px;"> 
 
\t \t \t d2 
 
\t \t </td> 
 
\t \t <td style="font-size:12px;"> 
 
\t \t \t e2 
 
\t \t </td> 
 
\t \t <td style="font-size:12px;"> 
 
\t \t \t f2 
 
\t \t </td> 
 
\t \t <td style="font-size:12px;"> 
 
\t \t \t g2 
 
\t \t </td> 
 
\t \t <td style="font-size:12px;"> 
 
\t \t \t h2 
 
\t \t </td> 
 
\t \t <td style="font-size:12px;"> 
 
\t \t \t i2 
 
\t \t </td> 
 
\t </tr> 
 

 
</tbody> 
 
</table>

、私はクラステーブル応答性を追加し、私はdiv要素でそれを行うみましたが、それはアルませんのy A1、B1、C1 ...

私は何をすべき：それは2つのヘッダを持っているので、それほど動作しますか？ DIVSで

これが私の結果である：

Answer 1

あなたはmediaqueriesを見て、レイアウトを破るために曲げることがあります。

colspan属性を効率的に使用します（つまり、tableを正しく構築します）。

すべてのスタイルをスタイルシートに移動する必要があります。

例（仕事でmediaqueriesを調べるために、全ページでも、それを実行）

ノート：それは破ることができると1つの脇tbodyを立つように、2つのtheadが必要とされています。

#states { 
 
    margin: 1em auto; 
 
    border-collapse: collapse; 
 
    table-layout: fixed; 
 
    text-align: center; 
 
    font-size: 12px; 
 
} 
 

 
#states td, 
 
#states thead + thead th { 
 
    width: 6em; 
 
    height: 6em; 
 
    background: #56D0A0 
 
} 
 

 
#states td { 
 
    background: #5BD0D0 
 
} 
 

 
#states th[colspan="2"] { 
 
    text-align: left; 
 
    border-radius: 0 10em 0 0; 
 
    font-size: 10px; 
 
    font-family: 'gothic'; 
 
    background-color: #00508e; 
 
    border: none; 
 
    width: 5cm; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    color: white; 
 
} 
 

 
thead:first-of-type { 
 
    border-bottom: 3px solid #5b5b5e; 
 
} 
 

 
@media (max-width: 640px) {/* break point*/ 
 
    table#states { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 50%; 
 
    min-width: 15em; 
 
    } 
 
    #states thead:first-of-type { 
 
    width:100%; 
 
    } 
 
    #states thead:first-of-type [colspan="2"] { 
 
    width: 100%; 
 
    border-radius: 0; 
 
    } 
 
    thead:first-of-type th { 
 
    display: none; 
 
    } 
 
    thead:first-of-type th[colspan="2"] { 
 
    width: 100%; 
 
    display: block; 
 
    } 
 
    #states thead, 
 
    #states tbody, 
 
    #states tr, 
 
    #states thead + thead th, 
 
    #states td { 
 
    width: auto; 
 
    display: block; 
 
    flex: 1 0 auto; 
 
    } 
 
    /* you'll need more flex to put th and td side by side if content is uneven , 
 
    but can be seen later */ 
 
}

<table id="states"> 
 
    <thead> 
 
    <tr> 
 
     <th colspan="2"> 
 
     A 
 
     </th> 
 
     <th colspan="7"></th> 
 
    </tr> 
 
    </thead> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     a1 
 
     </th> 
 
     <th> 
 
     b1 
 
     </th> 
 
     <th> 
 
     c1 
 
     </th> 
 
     <th> 
 
     d1 
 
     </th> 
 
     <th> 
 
     e1 
 
     </th> 
 
     <th> 
 
     f1 
 
     </th> 
 
     <th> 
 
     g1 
 
     </th> 
 
     <th> 
 
     h1 
 
     </th> 
 
     <th> 
 
     i1 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     a2 
 
     </td> 
 
     <td> 
 
     b2 
 
     </td> 
 
     <td> 
 
     c2 
 
     </td> 
 
     <td> 
 
     d2 
 
     </td> 
 
     <td> 
 
     e2 
 
     </td> 
 
     <td> 
 
     f2 
 
     </td> 
 
     <td> 
 
     g2 
 
     </td> 
 
     <td> 
 
     h2 
 
     </td> 
 
     <td> 
 
     i2 
 
     </td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>