Link to home
Start Free TrialLog in
Avatar of weikelbob
weikelbobFlag for United States of America

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.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

What do you mean by responsive?

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
.table-responsive {
	display: block;
	width: 100%;
	overflow-x: auto;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

Open in new window

Which adds a horizontal scroll bar to your 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
<!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>

Open in new window


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.
Avatar of weikelbob

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.
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.
I'm going to try the scrollbar idea. Let me impliment this for a couple of days. I'll be back.
Table must be 100% width.
.table-s {
	display: block;
	width: 100%;
	overflow-x: auto;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

Open in new window


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

Open in new window

I am confused - does your last post mean it worked or it didn't?
Trying to troubeshoot it, I can't figure it out.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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

.table-s {
	min-width: 900px;
	width: 100%;
	display:inline;
}
.responsive-container {
  overflow-x: auto; 
  width: 100%;
}

Open in new window



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

Open in new window

Seems the culprit is line 20 of responsive.css
table, thead, tbody, th, td, tr {
	display: block;
}

Open in new window

That needs to be removed or overridden.
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.
Tried display:inline and display:table. No luck:

<div id="responsive-container">
<table class="table-s">
...
</table>
</div>

Open in new window


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

Open in new window

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;
}

Open in new window

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

display: table!important;

Open in new window

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

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

Open in new window


<div id="responsive-container">
<table class="table-s">
</table>
</div>

Open in new window

Look at this style
#responsive-container table, #responsive-container thead, #responsive-container tbody, #responsive-container th, #responsive-container td, #responsive-container tr {
	display: table!important;
}

Open in new window

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
Sounds good. I'm in the middle of a move. Give me a couple of days to impliment this. Thanks for being patient.
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
Thats because on responsive.css line 20 you have this
table, thead, tbody, th, td, tr {
	display: block;
}

Open in new window


That display block is the problem
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
Got it! You deserve 2000 points. Wish I could. Giving you 500 :)
Thank you and you are most welcome.