Responsive Table

HTML & CSS
1

Hate to bother you guys again, but I have a table that, no matter what I’ve tried, will not scale. Here’s the htmlL


        <table class = "events" summary = "Estimates of drum repairs">
          <caption> Approximate Cost of Various Drum Repairs </caption>
          <tr>
            <th> PATIENT </th>
            <th> TREATMENT </th>
            <th>  SIZE  </th>
            <th> TUNING MECHANISM </th>
            <th>  COST  </th>
          </tr>
          <tr>
            <td> Djembe </td>
            <td> Rehead </td>
            <td> Full </td>
            <td> Rope </td>
            <td> $140 inc. skin </td>
          </tr>
          <tr>
            <td> Tabla </td>
            <td> Rehead </td>
            <td> Full </td>
            <td> Traditional </td>
            <td> $60 + parts </td>
          </tr>
          <tr>
            <td> Ceramic Doumbek </td>
            <td> Rehead </td>
            <td> Full </td>
            <td> Rope </td>
            <td> $60 + parts </td>
          </tr>
          <tr>
            <td> Frame Drum </td>
            <td> Rehead </td>
            <td> Full </td>
            <td> Traditional </td>
            <td> $50 + parts </td>
          </tr>
          <tr>
            <td> Djembe </td>
            <td> Tuning </td>
            <td> Full </td>
            <td> Rope </td>
            <td> $40 </td>
          </tr>
          <tr>
            <td> Tabla </td>
            <td> Tuning </td>
            <td> Full </td>
            <td> Traditional </td>
            <td> $30 </td>
          </tr>
        </table>

And the CSS:

table.events {
	border-collapse: collapse;
}

table.events th, table.events td {
	padding: 0.375em; /* 6px */
	border: 0.076925em solid #000066; /* 1px */
}

table.events th {
	font-size: small;
	text-align: center;
	background: #241374 url(backgrounds/header-bg.jpg);
	color: #ffffff;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0.15385em; /* 2px */
	padding-right: 0.15385em; /* 2px */
}

table.events td {
	font-size: medium;
	background: #e2edff url(backgrounds/td.jpg) repeat-x top;
}

table.events caption {
	font-size: medium;
	text-align: center;
	color: #000000;
	padding-bottom: 0.3125em; /* 5px */
	font-weight: bold;
}

I’ve tried to set the width inline with pxs and relative values. I’ve tried to set the CSS width using pxs and relative values. Not only does the table not scale, it doesn’t seem to respond at all to the changes.

I’ve tried different values for the font size, but this also seems to fail to trigger any response.

Here’s the page: http://www.drumdr.com/repair-rates.html

What gives?

2

Tables are always a tricky one to make responsive, but there are a few tricks you can use.
The problem is that any column will only go as narrow as the longest word that is found within it.
So your first column hits the stops when “Doumbek” touches the sides, column 2 is “TREATMENT” in the head, Ect.

If you want to keep the table in it’s current state, you can allow hyphenation in the cells to allow the words to break and wrap. If you do go down that route, I think it’s best to have that in a media query, because otherwise you can end up with a lot of unnecessary word breaks.
Another option is to have a query that minimises the padding and/or letter spacing in the cells.

The other way to go is to have the whole table collapse into a single column, as in this example.

1 Like
3

What do you mean by scale exactly?

If you mean you want the table to stretch to take all available space then you need to set it to width:100% because tables are shrink to fit otherwise.


table.events{width:100%}

If as Sam suggested above you want to make the table get down to 320px for small mobiles then you would need to use the method shown in my pen above and make it form one column.

4

Thanks Sam. Give me a while to try digest that.

5

By scale I mean respond as in responsive - stretch and shrink accordingly.

This table will neither stretch nor shrink. I’ve tried

table.events {
	border-collapse: collapse;
        width: 100%;
}

I’ve tried values from 1% to 300% and from 1px to 1000000px but the table will not respond. This is what made me think the font size might be key. So far that’s had no effect either. I haven’t tried the padding yet.

6

Tables do not respond well. is it mandatory to use a table? Can’t it be replaced with Divs?

7

No, data must be in a table to be semantically correct and this is clearly tabular data :slight_smile:

2 Likes
8

Adding width:100% to .events makes the table steretch all the way across the available space as I mentioned in my last post.

1757×678 255 KB

I think you must mean something else?

9

take a look at this demo. I just remembered I had sent this same link to one of my developers to implement responsive tables, because she told me tables don’t scale very well.

1 Like
10

I still prefer the method in my codepen although it takes a little more effort to set up. It all depends on data as to which is the best method but for variable data widths I think a single columnar approach will work best.

I’m not keen on hiding columns in the table as that just confuses the user and if you can hide the column it begs the question as to whether it was necessary in the first place.:slight_smile:

4 Likes
11

This is beautiful, too. Thanks for sharing.

12

No, that’s what I mean. I’ve been trying to figure out why the table will not respond to different width values but haven’t had any luck. I’ve tried clearing the browser’s history and my reverse proxy’s cache. The changes will not take effect. By this time I’ve tried maybe 30 times to effect changes and the table just seems to have a mind of its own. Right now it seems to have settled on 100% width, even though there’s no width value in the .css file.

13

Is the URL posted earlier still the active URL?

This is what I see at the moment using that URL:

541×633 48.4 KB

14

Yes, same URL, and this is what I see after clearing the browser’s history. As I said earlier, this table currently has no width attribute either in the markup or the css.

15

Not arguing with the man in the know.

screen.css (line 525)

table.events {
    border-collapse: collapse;
    width: 20%;
}
16

Yes there is a 20% width been added now which wasn’t there before and was not seen in my post #8 inspector where I added a 100% width to show it would work if applied. :slight_smile:

If the 20% is changed to 100% then the table will work at full width. It will not however scale smaller than its content and that would need the technique I have mentioned a few times already.

1 Like
17

OK, I’m seeing the page respond to the different values now. I need to purge the cache, clear the browsing history and refresh the page. You’r right, it will not scale, so I’ll try to adapt your technique to my needs.

Hope you don’t mind if I pick your brain as I go along.

1 Like
18

OK, I’ve managed to make some improvements based on Mr. O’brien’s suggestions.

The first thing I did was to narrow the table by eliminating one column, rewording two or three of the longer entries and reducing the font size just a bit. That in itself helped a lot. The table doesn’t have to switch to a single column 'til 320px.

Now I’m wondering if there’s some way to single out a particular heading in the table. Once the table switches to single column, I want to to make the first heading “Patient” be a different color or perhaps have the original background and be aligned left (along with it’s corresponding entry). The following headings and corresponding entries would be slightly indented. Something like this:

OK, never mind. I couldn’t get this thing to indent, but I hope you get my meaning.

19

Yes you can do things like this:

table.events.mobile-optimised,
table.events.mobile-optimised td {width:80%;margin:auto}
table.events.mobile-optimised  tr{border:none}
table.events.mobile-optimised tbody tr> td:first-child{background:red}

table.events.mobile-optimised tbody td:last-child{margin-bottom:10px;}

Add that inside your media query and change as required.

3 Likes
20

Generally 320px is as far as you need to go to fit on most mobiles.
If you are able to squeeze that far, I think you are there.

3 Likes