Is it possible to display table rows vertically with CSS? - html

Question

I have a table like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone no.</th>
<th>Address</th>
<th>Wealth</th>
</tr>
</thead>
<tbody>
<tr>
<th>John Doe</th>
<td>00123456789</td>
<td>Morgue St. 21</td>
<td>$100,000</td>
</tr><tr>
<th>Mary Sue</th>
<td>00987654321</td>
<td>Impossible St. 12</td>
<td>$999,999,999,999,999</td>
</tr><tr>
<th>Cpt. Kirk</th>
<td>00999999999</td>
<td>Enterprise St. 22</td>
<td>$100,000,000</td>
</tr>
</tbody>
</table>
Well, this table is pretty wide. And now I have to make a stylesheet that would make the site appropriate for viewing on a narrow screen, like a mobile phone. So I have to do sth with this wide table.
I was thinking if this table could display vertically, not horizontally. More specifically, I was thinking if it could display more like this:
<ul>
<li><strong>John Doe:</strong>
<ul>
<li><em>Phone no.:</em> 00123456789</li>
<li><em>Address:</em> Morgue St. 21</li>
<li><em>Wealth:</em> $100,000</li>
</ul>
</li><li><strong>Mary Sue:</strong>
<ul>
<li><em>Phone no.:</em> 00987654321</li>
<li><em>Address:</em> Impossible St. 12</li>
<li><em>Wealth:</em> $999,999,999,999,999</li>
</ul>
</li><li><strong>Cpt. Kirk:</strong>
<ul>
<li><em>Phone no.:</em> 00999999999</li>
<li><em>Address:</em> Enterprise St. 22</li>
<li><em>Wealth:</em> $100,000,000 </li>
</ul>
</li>
</ul>
Now, I surely could make a Javascript that would transform the table code from the first snippet to the list code from the second snippet. But I wonder, if this is necessary? Is it possible to make a CSS stylesheet that, when attached to the table code from the first snippet would make it look like the second snippet?

Answer 1

Sure, you can play with media queries and change the display of the table :
See this fiddle
#media(max-width: 640px){
table, table td, table tr, table th { display: block; text-align: left; }
table th, table td { margin: 0; padding-left: 25px; }
table td { margin-left: 40px;list-style: square; display: list-item; padding-left: 0; }
table thead { display: none; }
}

Answer 2

td, th {
text-align: left;
display: block;
float: left;
width: 100%;
}
thead {
display: none;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone no.</th>
<th>Address</th>
<th>Wealth</th>
</tr>
</thead>
<tbody>
<tr>
<th>John Doe</th>
<td>00123456789</td>
<td>Morgue St. 21</td>
<td>$100,000</td>
</tr><tr>
<th>Mary Sue</th>
<td>00987654321</td>
<td>Impossible St. 12</td>
<td>$999,999,999,999,999</td>
</tr><tr>
<th>Cpt. Kirk</th>
<td>00999999999</td>
<td>Enterprise St. 22</td>
<td>$100,000,000</td>
</tr>
</tbody>
</table>
Here's a possible way without the <thead> elements, but you could create hidden elements before each person, e.g. <span class="hidden">Name:</span> Cpt. Kirk and then enable all the hidden elements with media queries. Not the most elegant solution, I'd probably prefer JS for this.

Answer 3

There might be better ways to do this, but here is a solution to reach the goal:
table thead{
display:none;
}
table tbody tr th{
display:block;
text-align: left;
}
table tbody tr td{
display:block;
margin-left:20px;
}
table tbody tr th::before{
content:"• ";
}
table tbody tr td::before{
content:"◊ ";
}
Find a working example: https://jsfiddle.net/ktnurvfr/

Answer 4

You can change the table elements to display block and force them to act like block elements just add this class to your table.
.vertical-table thead{
display:none;
}
.vertical-table tr, .vertical-table th, .vertical-table td{
display:block;
width:100%;
}
.vertical-table thead{
display:none;
}
.vertical-table tr, .vertical-table th, .vertical-table td{
display:block;
width:100%;
}
<table class="vertical-table">
<thead>
<tr>
<th>Name</th>
<th>Phone no.</th>
<th>Address</th>
<th>Wealth</th>
</tr>
</thead>
<tbody>
<tr>
<th>John Doe</th>
<td>00123456789</td>
<td>Morgue St. 21</td>
<td>$100,000</td>
</tr><tr>
<th>Mary Sue</th>
<td>00987654321</td>
<td>Impossible St. 12</td>
<td>$999,999,999,999,999</td>
</tr><tr>
<th>Cpt. Kirk</th>
<td>00999999999</td>
<td>Enterprise St. 22</td>
<td>$100,000,000</td>
</tr>
</tbody>
</table>

Answer 5

you can use this code :
#media(max-width: 640px){
table, table td, table tr, table th { display: block; text-align: left; }
table th, table td { margin: 0; padding-left: 25px; }
table td { margin-left: 40px;list-style: square; display: list-item; padding-left: 0; }
table thead { display: none; }
}
i will be work.

Answer 6

I had the same problem. During my search I encountered this elegant solution by sergiopinnaprato: http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table
On smaller screens it changes the table to a single column. Very readable solution using only html and css code:
HTML:
<div id="no-more-tables">
<table class="col-md-12 table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th>Code</th>
<th>Company</th>
<th class="numeric">Price</th>
<th class="numeric">Change</th>
<th class="numeric">Change %</th>
<th class="numeric">Open</th>
<th class="numeric">High</th>
<th class="numeric">Low</th>
<th class="numeric">Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Code">AAC</td>
<td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
<td data-title="Price" class="numeric">$1.38</td>
<td data-title="Change" class="numeric">-0.01</td>
<td data-title="Change %" class="numeric">-0.36%</td>
<td data-title="Open" class="numeric">$1.39</td>
<td data-title="High" class="numeric">$1.39</td>
<td data-title="Low" class="numeric">$1.38</td>
<td data-title="Volume" class="numeric">9,395</td>
</tr>
<tr>
<td data-title="Code">AAD</td>
<td data-title="Company">ARDENT LEISURE GROUP</td>
<td data-title="Price" class="numeric">$1.15</td>
<td data-title="Change" class="numeric">+0.02</td>
<td data-title="Change %" class="numeric">1.32%</td>
<td data-title="Open" class="numeric">$1.14</td>
<td data-title="High" class="numeric">$1.15</td>
<td data-title="Low" class="numeric">$1.13</td>
<td data-title="Volume" class="numeric">56,431</td>
</tr>
</tbody>
</table>
</div>
CSS:
#media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#no-more-tables 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;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); }
}
Hope this helps!