Search code examples
htmlcssmedia-queries

create responsive table

i have create a table like this

+---------------+
| 1 | 2 | 3 | 4 |
+---+---+---+---+
| 5 | 6 | 7 | 8 |
+---+---+---+---+
| 9 | 10| 11| 12|
+---+---+---+---+
| 13| 14| 15| 16|
+---+---+---+---+

when i resize my browser to tablet size,it should be like this-

 +----------+
| 1 | 2 | 3 |
+---+---+---+
| 4 | 5 | 6 | 
+---+---+---+
| 7 | 8 | 9 | 
+---+---+---+
| 10| 11| 12|
+---+---+---+

it is possible?

Solution

  • You can't create with using table tags. But you can create with using div tags and responsive css. Here is your answer:

    .container {
  float: left;
  width: 100%;
  max-width: 204px;
  text-align: center;
  border-left: 1px dashed #000;
  border-top: 1px dashed #000;
}

.cell {
  float: left;
  width: 100%;
  max-width: 50px;
  border-right: 1px dashed #000;
  border-bottom: 1px dashed #000;
}
    <div class="container">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
  <div class="cell">15</div>
  <div class="cell">16</div>
</div>

    Paste this HTML codes in your html document and check it live.