Title and content of this article basically I copied from here.
HTML:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link type="text/css" rel="stylesheet" href="/index.css"> </head> <body> <table id="table_id"> <tr> <td>Column1</td> <td>Column2</td> <td>Column3</td> <td>Column4</td> <td>Column5</td> <td>Column6</td> <td>Column7</td> <td>Column8</td> <td>Column9</td> <td>Column1</td> <td>Column2</td> <td>Column3</td> <td>Column4</td> <td>Column5</td> <td>Column6</td> <td>Column7</td> <td>Column8</td> <td>Column9</td> </tr> <tr> <td>Column11</td> <td>Column21</td> <td>Column31</td> <td>Column41</td> <td>Column51</td> <td>Column61</td> <td>Column71</td> <td>Column81</td> <td>Column91</td> <td>Column11</td> <td>Column21</td> <td>Column31</td> <td>Column41</td> <td>Column51</td> <td>Column61</td> <td>Column71</td> <td>Column81</td> <td>Column91</td> </tr> </table> </body> </html>
CSS:
body { font-size: 20px; } #table_id { display: block; border: 1px solid; } #table_id tr { border: 1px solid; } #table_id td { display: inline-block; min-width: 50px; border: 1px solid; width: 100px; min-height: 50px; }
Example you can see here.
Things to notice are:
#table_id {
display: block;
and:
#table_id td {
display: inline-block;
Basically you need only display: block on table to set, and display: inline-block on td.
Idea behind this article was to have responsive table, but after testing I am not satisfied with it. Next thing to test is this article, which at this moment I didn't test.
---
Here is responsive table example.
HTML:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1" name="viewport"> <title></title> <link type="text/css" rel="stylesheet" href="/index.css"> </head> <body> <table id="table_id"> <thead> <tr> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> <th>Column5</th> <th>Column6</th> <th>Column7</th> <th>Column8</th> <th>Column9</th> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> <th>Column5</th> <th>Column6</th> <th>Column7</th> <th>Column8</th> <th>Column9</th> </tr> </thead> <tr> <td>Column1</td> <td>Column2</td> <td>Column3</td> <td>Column4</td> <td>Column5</td> <td>Column6</td> <td>Column7</td> <td>Column8</td> <td>Column9</td> <td>Column1</td> <td>Column2</td> <td>Column3</td> <td>Column4</td> <td>Column5</td> <td>Column6</td> <td>Column7</td> <td>Column8</td> <td>Column9</td> </tr> <tr> <td>Column11</td> <td>Column21</td> <td>Column31</td> <td>Column41</td> <td>Column51</td> <td>Column61</td> <td>Column71</td> <td>Column81</td> <td>Column91</td> <td>Column11</td> <td>Column21</td> <td>Column31</td> <td>Column41</td> <td>Column51</td> <td>Column61</td> <td>Column71</td> <td>Column81</td> <td>Column91</td> </tr> </table> </body> </html>
CSS:
/* @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { */ @media only screen and (max-width: 480px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Label the data */ td:nth-of-type(1):before { content: "Column1"; } td:nth-of-type(2):before { content: "Column2"; } td:nth-of-type(3):before { content: "Column3"; } td:nth-of-type(4):before { content: "Column4"; } td:nth-of-type(5):before { content: "Column5"; } td:nth-of-type(6):before { content: "Column6"; } td:nth-of-type(7):before { content: "Column7"; } td:nth-of-type(8):before { content: "Column8"; } td:nth-of-type(9):before { content: "Column9"; } td:nth-of-type(10):before { content: "Column1"; } td:nth-of-type(11):before { content: "Column2"; } td:nth-of-type(12):before { content: "Column3"; } td:nth-of-type(13):before { content: "Column4"; } td:nth-of-type(14):before { content: "Column5"; } td:nth-of-type(15):before { content: "Column6"; } td:nth-of-type(16):before { content: "Column7"; } td:nth-of-type(17):before { content: "Column8"; } td:nth-of-type(18):before { content: "Column9"; } }
Example you can see here. Problem which I had is something like described here. I had to insert line:
<meta content="width=device-width, initial-scale=1" name="viewport">
and in CSS I am using:
@media only screen and (max-width: 480px),
(min-device-width: 768px) and (max-device-width: 1024px)
Only like this I was able to force example to work in Dolphin browser...