weikelbob
asked on
Easy responsive table out of existing table
How do you make a responsive table 5 columns by 1-7 row?
Need to do it with all CSS and one HTML change per table.
Need to do it with all CSS and one HTML change per table.
As an alternative, you can use a css responsive grid. In this example, I am using bootstrap.
I have 3 media queries set for extra small, small and medium and larger screens http://getbootstrap.com/css/#grid
For med and larger screens, you see the first 2 columns are wider. But when you go down to a small screen, the 2nd column takes up less space and when you go down to an extra small screen, I am hiding some columns.
http://jsbin.com/yegebuwode/edit?html,output
Where I have hidden columns, you can have a link that expands the row higher or something else to see data. Making a lot of data responsive can be more complex than it seems. How and what you display will be depend on the type of information you are showing.
I have 3 media queries set for extra small, small and medium and larger screens http://getbootstrap.com/css/#grid
For med and larger screens, you see the first 2 columns are wider. But when you go down to a small screen, the 2nd column takes up less space and when you go down to an extra small screen, I am hiding some columns.
http://jsbin.com/yegebuwode/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>28995447</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
div.row:nth-child(even) {background: #CCC}
div.row:nth-child(odd) {background: #FFF}
</style>
</head>
<body>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">Long description of something</div>
<div class="hidden-xs col-sm-3 col-md-3">Long too but gets smaller</div>
<div class="hidden-xs col-sm-2 col-md-2">3</div>
<div class="col-xs-3 col-sm-2 col-md-2">4</div>
<div class="col-xs-3 col-sm-1 col-md-2">5</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">Long description of something</div>
<div class="hidden-xs col-sm-3 col-md-3">Long too but gets smaller</div>
<div class="hidden-xs col-sm-2 col-md-2">3</div>
<div class="col-xs-3 col-sm-2 col-md-2">4</div>
<div class="col-xs-3 col-sm-1 col-md-2">5</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">Long description of something</div>
<div class="hidden-xs col-sm-3 col-md-3">Long too but gets smaller</div>
<div class="hidden-xs col-sm-2 col-md-2">3</div>
<div class="col-xs-3 col-sm-2 col-md-2">4</div>
<div class="col-xs-3 col-sm-1 col-md-2">5</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">Long description of something</div>
<div class="hidden-xs col-sm-3 col-md-3">Long too but gets smaller</div>
<div class="hidden-xs col-sm-2 col-md-2">3</div>
<div class="col-xs-3 col-sm-2 col-md-2">4</div>
<div class="col-xs-3 col-sm-1 col-md-2">5</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">Long description of something</div>
<div class="hidden-xs col-sm-3 col-md-3">Long too but gets smaller</div>
<div class="hidden-xs col-sm-2 col-md-2">3</div>
<div class="col-xs-3 col-sm-2 col-md-2">4</div>
<div class="col-xs-3 col-sm-1 col-md-2">5</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">Long description of something</div>
<div class="hidden-xs col-sm-3 col-md-3">Long too but gets smaller</div>
<div class="hidden-xs col-sm-2 col-md-2">3</div>
<div class="col-xs-3 col-sm-2 col-md-2">4</div>
<div class="col-xs-3 col-sm-1 col-md-2">5</div>
</div>
</body>
</html>
Where I have hidden columns, you can have a link that expands the row higher or something else to see data. Making a lot of data responsive can be more complex than it seems. How and what you display will be depend on the type of information you are showing.
ASKER
Just want the least HTML changes as possible, responsive on desktop, tablet and mobile. Can someone give me the code - HTML and CSS. I gave you my code.
ASKER
I like the scroll bar idea. That might work. Is there anything else that's easy?
Is there anything else that's easy?Not with tables - they are very difficult creatures.
I think you will find what is easy for the developer to accomplish does the opposite for the viewer and vice versa. The responsive thing takes more work on your part as the developer.
Just another idea is to write two tables to the browser where you use media queries to show one for the wide screen and the other for the narrow. I would only suggest this because you said you have 7 rows of data. If you have a lot of rows, then no.
Just another idea is to write two tables to the browser where you use media queries to show one for the wide screen and the other for the narrow. I would only suggest this because you said you have 7 rows of data. If you have a lot of rows, then no.
ASKER
I'm going to try the scrollbar idea. Let me impliment this for a couple of days. I'll be back.
ASKER
Table must be 100% width.
ASKER
.table-s {
display: block;
width: 100%;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
<table class="table-s">
<tbody>
<tr>
<td>
<p align="left"><span style="font-weight: bold; font-size: 10pt; font-family: Arial;">Absorbency</span></p></td>
<td>
<p align="left"><span style="font-weight: bold; font-size: 10pt; font-family: Arial;">Length</span></p></td>
<td>
<p align="left"><span style="font-weight: bold; font-size: 10pt; font-family: Arial;">Quantity</span></p></td>
<td>
<p align="left"><span style="font-weight: bold; font-size: 10pt; font-family: Arial;"><span style="font-weight: bold; font-size: 10pt; font-family: Arial;">SKU</span></span></p></td>
</tr>
<tr>
<td><span style="font-size: 10pt; font-family: Arial;">Regular Long<br />
</span></td>
<td><span style="font-size: 10pt; font-family: Arial;">11"</span></td>
<td><span style="font-size: 10pt; font-family: Arial;">54/pack or 216/case</span></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">PV-914/1</span></p></td>
</tr>
<tr>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">Extra</span></p></td>
<td><span style="font-size: 10pt; font-family: Arial;">9.25"</span></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">20/pack or 180/case</span></p></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">BC-012</span></p></td>
</tr>
<tr>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">Extra Plus</span></p></td>
<td><span style="font-size: 10pt; font-family: Arial;">11"</span></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">16/pack or 144/case</span></p></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">BC-013</span></p></td>
</tr>
<tr>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">Ultra</span></p></td>
<td><span style="font-size: 10pt; font-family: Arial;">11"</span></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">48/pack or 192/case</span></p></td>
<td><span style="font-size: 10pt; font-family: Arial;">PV-916</span></td>
</tr>
<tr>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">Ultra Plus</span></p></td>
<td><span style="font-size: 10pt; font-family: Arial;">13"</span></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">39/pack or 156/case</span></p></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">PV-915/1</span></p></td>
</tr>
<tr>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">Ultimate</span></p></td>
<td><span style="font-size: 10pt; font-family: Arial;">16"</span></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">33/pack or 132/case</span></p></td>
<td><span style="font-size: 10pt; font-family: Arial;">PV-923</span></td>
</tr>
</tbody>
</table>
I am confused - does your last post mean it worked or it didn't?
ASKER
ASKER
Trying to troubeshoot it, I can't figure it out.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
The code breaks when the screen gets small. I think it's the display:block. It's hard coded into my website template. I need a display: X code that fixes it in one or both of the classes. Display: inline in the table doesn't do it. Can you help? I'm such a novice.
http://www.idiaper.com/prevail-bladder-control-pads
http://www.idiaper.com/prevail-bladder-control-pads
.table-s {
min-width: 900px;
width: 100%;
display:inline;
}
.responsive-container {
overflow-x: auto;
width: 100%;
}
<div class="responsive-container">
<table class="table-s">
<tbody>
<tr>
<td>
<p align="left"><span style="font-weight: bold; font-size: 10pt; font-family: Arial;">Absorbency</span></p></td>
<td>
<p align="left"><span style="font-weight: bold; font-size: 10pt; font-family: Arial;">Length</span></p></td>
<td>
<p align="left"><span style="font-weight: bold; font-size: 10pt; font-family: Arial;">Quantity</span></p></td>
<td>
<p align="left"><span style="font-weight: bold; font-size: 10pt; font-family: Arial;"><span style="font-weight: bold; font-size: 10pt; font-family: Arial;">SKU</span></span></p></td>
</tr>
<tr>
<td><span style="font-size: 10pt; font-family: Arial;">Regular Long<br />
</span></td>
<td><span style="font-size: 10pt; font-family: Arial;">11"</span></td>
<td><span style="font-size: 10pt; font-family: Arial;">54/pack or 216/case</span></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">PV-914/1</span></p></td>
</tr>
<tr>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">Extra</span></p></td>
<td><span style="font-size: 10pt; font-family: Arial;">9.25"</span></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">20/pack or 180/case</span></p></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">BC-012</span></p></td>
</tr>
<tr>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">Extra Plus</span></p></td>
<td><span style="font-size: 10pt; font-family: Arial;">11"</span></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">16/pack or 144/case</span></p></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">BC-013</span></p></td>
</tr>
<tr>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">Ultra</span></p></td>
<td><span style="font-size: 10pt; font-family: Arial;">11"</span></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">48/pack or 192/case</span></p></td>
<td><span style="font-size: 10pt; font-family: Arial;">PV-916</span></td>
</tr>
<tr>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">Ultra Plus</span></p></td>
<td><span style="font-size: 10pt; font-family: Arial;">13"</span></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">39/pack or 156/case</span></p></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">PV-915/1</span></p></td>
</tr>
<tr>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">Ultimate</span></p></td>
<td><span style="font-size: 10pt; font-family: Arial;">16"</span></td>
<td>
<p align="left"><span style="font-size: 10pt; font-family: Arial;">33/pack or 132/case</span></p></td>
<td><span style="font-size: 10pt; font-family: Arial;">PV-923</span></td>
</tr>
</tbody>
</table>
</div>
Seems the culprit is line 20 of responsive.css
table, thead, tbody, th, td, tr {
display: block;
}
That needs to be removed or overridden.
ASKER
I know, I just don't know how to override it. Sorry I'm such a novice.
The tables make up the template, so I can't remove it.
What CSS will override it? Can I put it in .table-s and .responsive-container? Is it ok to replace it with display:inline? I don't want to do it wrong.
The tables make up the template, so I can't remove it.
What CSS will override it? Can I put it in .table-s and .responsive-container? Is it ok to replace it with display:inline? I don't want to do it wrong.
ASKER
Tried display:inline and display:table. No luck:
<div id="responsive-container">
<table class="table-s">
...
</table>
</div>
.table-s {
min-width: 900px;
width: 100%;
display:inline;
}
#responsive-container {
overflow-x: auto;
width: 100%;
display:inline;
}
#responsive-container table, #responsive-container thead, #responsive-container tbody, #responsive-container th, #responsive-container td, #responsive-container tr {
display: table;
}
ASKER
woops, meant to write
.table-s {
min-width: 900px;
width: 100%;
display:table;
}
#responsive-container {
overflow-x: auto;
width: 100%;
display:table;
}
#responsive-container table, #responsive-container thead, #responsive-container tbody, #responsive-container th, #responsive-container td, #responsive-container tr {
display: table;
}
Why not just remove the style on line 20 of responsive.css - you don't have to set display - you just need to remove the display block.
Alternatively - in if you would prefer - in your above changes do this
Alternatively - in if you would prefer - in your above changes do this
display: table!important;
ASKER
I don't know what the heck I'm doing wrong. I don't think it's a good idea to change the template CSS, which would be taking out display:block. I'm doing the alternative way - adding display: table!important; . Sorry it's taking so long.
http://www.idiaper.com/prevail-bladder-control-pads
http://www.idiaper.com/prevail-bladder-control-pads
.table-s {
min-width: 900px;
width: 100%;
display: table!important;
}
#responsive-container {
overflow-x: auto;
width: 100%;
// tried adding display: table!important; to here too
}
#responsive-container table, #responsive-container thead, #responsive-container tbody, #responsive-container th, #responsive-container td, #responsive-container tr {
display: table!important;
}
<div id="responsive-container">
<table class="table-s">
</table>
</div>
Look at this style
display: table must only be applied to the table - not any other element - by applying it to tbody/thead/td/tr - you are making all of those elements render as table as well.
Here is a sample I put together from your code
#responsive-container table, #responsive-container thead, #responsive-container tbody, #responsive-container th, #responsive-container td, #responsive-container tr {
display: table!important;
}
What is it doing - look at all the elements it applies to.display: table must only be applied to the table - not any other element - by applying it to tbody/thead/td/tr - you are making all of those elements render as table as well.
Here is a sample I put together from your code
ASKER
Sounds good. I'm in the middle of a move. Give me a couple of days to impliment this. Thanks for being patient.
ASKER
I have exactly what you have except it breaks when the screen is smaller that 760 px. I used Firebug and found no reason
http://www.idiaper.com/prevail-bladder-control-pads
http://www.idiaper.com/prevail-bladder-control-pads
Thats because on responsive.css line 20 you have this
That display block is the problem
table, thead, tbody, th, td, tr {
display: block;
}
That display block is the problem
ASKER
I'll experiment with taking it out. Got to do some legwork. Will get back to you. Wish I could give you more than 500 points. Give me a day or two
ASKER
Got it! You deserve 2000 points. Wish I could. Giving you 500 :)
Thank you and you are most welcome.
Tables by nature are not responsive as their cells don't stack so as screen size diminishes the cells squash and then leak out the right of the page.
If you look at how bootstrap does it they have this style
Open in new window
Which adds a horizontal scroll bar to your table.