Zwei-Header in einer Tabelle, zeigen in einem Tisch reaktions

Question

Ich möchte eine ansprechende Tabelle tun:

ich es mit Tischen und divs zu tun versucht, aber es funktioniert nicht. ..

#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>

Offensichtlich füge ich die Klassentabelle ansprechenden und ich versuchte es mit divs zu tun, aber es funktioniert nicht al so arbeiten, weil es zwei Header hat: A y a1, b1, c1 ...

Was soll ich tun?

Mit DIVS das ist mein Ergebnis:

Answer 1

Sie mediaqueries aussehen und biegen Sie das Layout zu brechen.

Verwenden Sie das Attribut colspan effizient (mit anderen Worten bauen Sie Ihre table korrekt).

Jeder Stil sollte in das Stylesheet verschoben werden.

Beispiel (führen Sie es auch in voller Seite mediaqueries bei der Arbeit zu sehen)

Anmerkung: zwei thead sind erforderlich, damit es brechen und eine beiseite tbody stehen.

#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>