Hi there. Not that long ago @PaulOB gave a solution for a responsive HTML table and I’ll be jiggered if I can find the thread. Can anyone help please?
He has an example here, but I think there was another one where he has an on-line working example of it.
Thanks, Sam. I will have a go with this. I think there was a more recent one with a lot more mark-up.
Not sure if either of these might be what you had in mind. Paul’s, but not that recent:
More recent, but not Paul:
1 Like
Thanks a lot TB, Ralph and Sam. That is the one I was looking for. Having looked at it and my table I’m not sure my table would work with it as I have column and row headers http://www.littleberkhamsted.org.uk/accounts.php
I’m thinking I might cheat and hide two of the years’ data. (Oh, did I really say that!)
Paul’s example worked fine on my seven daily columns and it passed the acid test:
My problem (I think) is that the first column is a row header. I’m not sure how this would work. It seems the single column end-result would look rather odd.
Maybe it could be modified, with a class on the first header column, to make a 2 column table?
Though I couldn’t say how off the top of my head.
Works well for me with a simple tweak.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mytable {
width:100%;
margin:0 auto;
max-width:960px;
border-collapse:collapse;
}
.mytable td, .mytable th {
border:1px solid #000;
padding:10px;
vertical-align:top;
}
p {
margin:0 0 1em
}
.mytable tbody th {
text-align:right
}
@media screen and (max-width:601px) {
table.mobile-optimised {
word-wrap:break-word;
}
table.mobile-optimised thead {
display:none
}
table.mobile-optimised,
table.mobile-optimised tr{display:block;width:100%}
table.mobile-optimised td,
table.mobile-optimised tbody th {
display:block;
float:left;/* ie9 and under hack */
width:100%;
clear:both;
background:#f5f5f5;
padding:10px 5px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
border:none;
}
table.mobile-optimised tbody th{text-align:center;}
table.mobile-optimised tbody, table.mobile-optimised tr {
display:block
}
.mobile-optimised td:before {
content:attr(data-th) ' :';
display:inline-block;
font-weight:bold;
color:#000;
width:100px;
}
.mobile-optimised tbody td:last-child {
border-bottom:1px solid #000;
}
}
</style>
</head>
<body>
<table class="mytable mobile-optimised datatable">
<thead>
<tr class="head">
<th> </th>
<th scope="col">2011/12</th>
<th scope="col">2012/13</th>
<th scope="col">2013/14</th>
<th scope="col">2014/15</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Balance brought forward</th>
<td data-th="2011/12">5,903</td>
<td data-th="2011/13">5,674</td>
<td data-th="2011/14">5,741</td>
<td data-th="2011/15">7,615</td>
</tr>
<tr>
<th scope="row">+ Annual precept</th>
<td data-th="2011/12">6,700</td>
<td data-th="2011/13">7,400</td>
<td data-th="2011/14">7,025</td>
<td data-th="2011/15">7,461</td>
</tr>
<tr>
<th scope="row">+ Total other receipts</th>
<td data-th="2011/12">4,929</td>
<td data-th="2011/13">8,689</td>
<td data-th="2011/14">7,622</td>
<td data-th="2011/15">9,216</td>
</tr>
<tr>
<th scope="row">– Staff costs</th>
<td data-th="2011/12">2,261</td>
<td data-th="2011/13">2,882</td>
<td data-th="2011/14">3,066</td>
<td data-th="2011/15">2,894</td>
</tr>
<tr>
<th scope="row">– Loan interest / capital repayments</th>
<td data-th="2011/12">0</td>
<td data-th="2011/13">0</td>
<td data-th="2011/14">0</td>
<td data-th="2011/15">0</td>
</tr>
<tr>
<th scope="row">– Total other payments</th>
<td data-th="2011/12">9,597</td>
<td data-th="2011/13">13,140</td>
<td data-th="2011/14">9,707</td>
<td data-th="2011/15">15,888</td>
</tr>
<tr>
<th scope="row">= Balance carried forward</th>
<td data-th="2011/12">5,674</td>
<td data-th="2011/13">5,741</td>
<td data-th="2011/14">7,615</td>
<td data-th="2011/15">5,510</td>
</tr>
<tr>
<th scope="row">Total cash and investments</th>
<td data-th="2011/12">5,674</td>
<td data-th="2011/13">5,741</td>
<td data-th="2011/14">7,615</td>
<td data-th="2011/15">5,510</td>
</tr>
<tr>
<th scope="row">Total fixed assets and long term assets</th>
<td data-th="2011/12">228,926</td>
<td data-th="2011/13">233,245</td>
<td data-th="2011/14">233,245</td>
<td data-th="2011/15">233,245</td>
</tr>
<tr>
<th scope="row">Total borrowings</th>
<td data-th="2011/12">0</td>
<td data-th="2011/13">0</td>
<td data-th="2011/14">0</td>
<td data-th="2011/15">0</td>
</tr>
</tbody>
</table>
</body>
</html>
I prefer the mobile version to the dektop.
3 Likes
Thanks Paul. I might have known I wouldn’t be allowed to cheat! Many thanks
Just one thing - is there any way to get a border-top for the whole table? I’ve tried various things and either get nothing or a double border all but the top and bottom “rows”.
Like this?
That’s it! Strange it didn’t work for me before. Cheers Sam
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.