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