Responsive Data Table-Affecting Header + more

[Bonnie B.]

Re: https://css-tricks.com/responsive-data-tables/

Quick background: I maintain our company website that was built 5+ years ago. The CMS is antiquated and the company chosen built this from scratch (did not use open source or other easy stuff). They have us locked down; any change we need them to do costs us a crapload of $$. They have us very limited to what we can do. I’ve had to “code around” much of their work in order to get pages to look/feel a specific way. I have no access to the heart of the website, only through their back-end CMS. As an example, after 7 months of fighting, we had to pay $1,200 just for them to supply me with one measly CSS page that I can use so I don’t have to hand-code 500+ pages individually.

When our responsive site was launched 18 months ago, the responsive table code they provided sucks. When viewing on a device, the farthest right columns disappear, so users can’t get all the information…

That being said, I was thrilled to find Chris Coyier’s nifty responsive table code. We all love it and I’m trying to incorporate it into our pages that I hand-coded. I AM NOT A MAJOR CODER – I struggle through via trial and error.

PROBLEM
The page I’m working on is here: http://www.golakehavasu.com/test.aspx
The real page is here: http://www.golakehavasu.com/activities/boating/marinas-and-launch-ramps.aspx (view this on a cell phone and see the shotty responsive table issue)

Two things are happening, (1) for whatever reason beyond my comprehension, the CSS from the Chris’ zebra striping line item is affecting the header of our site, the stuff I have no access to (it’s supposed to be blue, the zebra striping color is affecting the header):

/* Zebra striping */
tr:nth-of-type(odd) { background: #E8EEf1; }

(2) The other thing I really want to do is, when the table gets sized to a device and is told to no longer behave like a table, to somehow keep the blue (or teal) header columns ”
Marinas & Motorized Launch Ramps” and “Non-Motorized Launch Ramps”.

I’ve given this my best shot. It’s beyond my expertise and I can’t figure it out. The code for the test page is below. I have zero access to anything else.

Boys and girls, any help would be tremendously appreciated. I do my best to keep up with the big coders, but you guys are way smarter than I.

Thanks in advance,
Bonnie B.

[MOD EDIT – Mega Code Dump Removed]

[Paulie_D]

As you can see I’ve had to remove the Code Dump you “provided” it just takes up too much space and is rarely legible enough in ‘forum’ form or detailed enough to cover the actual issue.

For demo purposes please use a tool like Codepen.io to show code.

[Paulie_D]

As for your first problem…the header.

Yes, it would, it’s a very general CSS declaration and (for some reason) your test page is laid out with tables as the primary structure.

This is a very old method of layout and ‘frowned on’ these days by ‘professional’ web developers.

I’m assuming that this is something you can’t or won’t be able to get away from???

I’m also seeing <br/> tags being used for spacing…another ‘old fashioned’ technique…margins/padding is what is used these days.

[Paulie_D]

Turning to your specific striping issue…to have this only apply to the table(s) you want, you have a couple of options.

The simplest is to note that both of these tables are inside a div with an ID of page-wrap…that means we can target tables that are specifically inside that div by amending the css to include that ID

E.G.

/* Zebra striping */
#page-wrap tr:nth-of-type(odd) {
 background: #E8EEf1;
}

[Paulie_D]

Turning to the second part “keeping the header parts”…those are controlled by a media query and are positioned (generally) off the page absolutely

@media only screen and (max-width: 760px), (max-device-width: 1024px) and (min-device-width: 768px)
thead tr {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Unfortunately that moves both header rows off the page which, if I understand correctly, you don’t want.

Well…each of those rows has a separate class so we can adjust the rule to only target the first row (which has a class of header_row) by changing it to this:

@media only screen and (max-width: 760px), (max-device-width: 1024px) and (min-device-width: 768px)
#page-wrap thead tr.header_row {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Remember we want to only target tables inside that page-wrap div.

[Shikkediel]

I’d consider getting a new design company and sue the current one for the content of your site. Things have changed, the web isn’t an apparently inaccessible fortress anymore for which you need specialists that are basically blackmailing you to pay through the nose. They should either get with the times or lose their business.

[Bonnie B.]

Paulie_D:

I wanted to use that other function but it required a payment to do so. I apologize.

#2 – You are correct; I am very limited as to what I can do. They have us on lock-down.

#3 and all the rest: You rock and I will take your advice and see what I can do.

Shikkediel: We need a total rebuild; however, the cost associated with what we have now is so large that it is not in the budget now, nor feasible. You have no idea how frustrating it is to maintain a website this large and be forced to use antiquated code and an even more antiquated hand-built CMS system (they didn’t use any type of open source, they built it from scratch). Yes, I wholeheartedly agree, but I’m not in a position to make the call. I have to work with what I’ve got. I would assume, in time, since the site code isn’t being kept up with changes by the W3 consortium, our site will eventually fail. At that point in time, I’m sure the higher ups will look at options.

I’d love to rebuild the site in WordPress; there’s nothing complicated about it that couldn’t be recreated in WP, however, it’s again not my call.

Boys, I appreciate greatly your help. Paulie, I apologize again for the massive amount of code I posted. I will revisit this table situation and let you know how it goes.

The developer’s logo is a big red ball; when slamming my head against a wall in frustration, I always think about the scene in Pulp Fiction with the Gimp and equate that to us getting f^^^ in the a$$. Thanks again.

[Bonnie B.]

Thank you all for your help. I’ve utilized CodePen with the code here: http://codepen.io/bonbuttercup/pen/gbZmXL.

The only two issues that remain are (1) when the window is resized small or on a cell phone, the header for the entire site gets screwy; the links are all over the place and I don’t know how to resolve this. (2) I’m still having issues trying to keep the two blue title bars in the table from vanishing when the table is forced to not behave like a table anymore. I’ve posted two images here as examples:

http://www.golakehavasu.com/!userfiles/zcode/header_issue.jpg
http://www.golakehavasu.com/!userfiles/zcode/table_subheader_issue.jpg

Would greatly appreciate any guidance you can provide. I’m just… stuck.

Oh, and real test page is here: http://www.golakehavasu.com/test.aspx

If anyone can get me past these two last issues I promise you if you ever make it out to Havasu, you’ll get a weekend of boat rides and dinners for free. Thanks again.

[Author]

Posts