Mariyselita Mariyselita - 24 days ago 5
CSS Question

Two headers in a table, show in one a table responsive

I would like to do a responsive table:

that looks like this.

I tried to do it with tables and divs, but it doesn't work...



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

</tbody>
</table>





Obviously, I add the class table-responsive and I tried do it with divs, but it doesn't also work because it has two headers: A y a1, b1, c1...

What should I do?

With DIVS this is my result:

With DIVS this is my result.

Answer

you may look at mediaqueries and flex to break the layout.

Use the colspan attribute efficiently(in other words build correctly your table).

every style should be moved to the style sheet.

example (run it also in full page to see mediaqueries at work)

note: two thead are required so it can break and one stand aside tbody.

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