CODEWITHSUNDEEP
htmlcssmedia-queries
Richard Tinkler
Richard Tinkler

Reputation: 1643

How to split a html table by columns for responsive design

We've checked the web and SO for a solution to this, but have found nothing to solve our specific problem.

We are using the following table format for a contact formular:

<table>
  <tr>
    <td colspan="2">COL1-2</td>
    <td colspan="2">COL3-4</td>
  </tr>
  <tr>
    <td>COL1</td>
    <td>COL2</td>
    <td>COL3</td>
    <td>COL4</td>
  </tr>
  <tr>
    <td>COL1</td>
    <td>COL2</td>
    <td>COL3</td>
    <td>COL4</td>
  </tr>
  <tr>
    <td>COL1</td>
    <td>COL2</td>
    <td>COL3</td>
    <td>COL4</td>
  </tr>
</table>

Using media queries, is it possible to make COLS3 & 4 sit under COLS1 &2 (see below)?

<table>
  <tr>
    <td colspan="2">COL1-2</td>
    <tr>
      <td>COL1</td>
      <td>COL2</td>
    </tr>
    <tr>
      <td>COL1</td>
      <td>COL2</td>
    </tr>
    <tr>
      <td>COL1</td>
      <td>COL2</td>
    </tr>
    <tr>
      <td colspan="2">COL3-4</td>
    </tr>
    <tr>
      <td>COL3</td>
      <td>COL4</td>
    </tr>
    <tr>
      <td>COL3</td>
      <td>COL4</td>
    </tr>
    <tr>
      <td>COL3</td>
      <td>COL4</td>
    </tr>
</table>

Upvotes: 2

Views: 3865

Answers (1)

davidcondrey
davidcondrey

Reputation: 35983

Yes but not purely in CSS alone. You could restructure the table so that column 1 and 2 are nested within a table, and column 3 and 4 are nested within a table. If you restuctured the table as such, you could create a media query to assign each of the two tables display block, so the table to the right would wrap under the table on the left.

table table { display:inline-block;vertical-align:top; }
<table border="1">
      <tr>
          <td class="wrap">
              <table border="1">
                  <tr><td colspan="2">COL1-2</td></tr>
                  <tr><td>COL1</td><td>COL2</td></tr>
                  <tr><td>COL1</td><td>COL2</td></tr>
                  <tr><td>COL1</td><td>COL2</td></tr>
              </table>
              <table border="1">
                  <tr><td colspan="2">COL3-4</td></tr>
                  <tr><td>COL3</td><td>COL4</td></tr>
                  <tr><td>COL3</td><td>COL4</td></tr>
                  <tr><td>COL3</td><td>COL4</td></tr>
              </table>
          </td>
      </tr>
    </table>

table table { display: block; } to wrap.

Upvotes: 4

Related Questions