4 replies [Last post]
joeabrown
joeabrown's picture
Offline
newbie
Canada
Last seen: 7 years 14 weeks ago
Canada
Timezone: GMT-4
Joined: 2014-07-04
Posts: 3
Points: 4

A set of styles was written so that <thead> does not scroll while

<tbody> does. Unfortunately, I have seen several instances where <table>, <th> and <td> have these styles applied even though there is no class defined for the tag. Most viewed was width: 25% applied to a <td>.

Any idea why this would happen?

table.scrollable {
    border-collapse: collapse;
    width: auto;
}
table.scrollable thead {
    text-align:center;
    display: table;
    float: left;
    width: 100%;
}
table.scrollable thead tr {
    display: table-row;
    width: 100%;
}
table.scrollable tbody {
    display: block;
    height: 120px;
    overflow: auto;
    float: left;
    width: 100%;
}
table.scrollable tbody tr {
    display: table;
    width: 100%;
}
table.scrollable tbody tr {
    height: 18px;
}
table.scrollable tbody td {
    padding:1px 8px;
}
table.scrollable th, td {
    width: 25%;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Link??

Without the html content, css is gibberish. We need to know the structure to properly debug the issue.

Proper scrolling of tbody has never been properly supported by any browser other than Netscape/Mozilla/Firefox, and Firefox et al dropped support a few years ago*, sadly.

cheers,

gary

* It was sometime after 2006, as I wrote an article on how to do it in 2004 and updated it in 2006. See Scrollable table, via the Wayback machine. Demo markup begins at about line 350. ~gt

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

joeabrown
joeabrown's picture
Offline
newbie
Canada
Last seen: 7 years 14 weeks ago
Canada
Timezone: GMT-4
Joined: 2014-07-04
Posts: 3
Points: 4

The pages are normally

The pages are normally password protected so I have extracted the relevant code and posted it to www.ottawakin.ca/lpproblem/LandingTableDemo.html.

The developer tools show the style for the for the link File Title as

table.scrollable th, td {
width: 25%;
}
The scrollable class should not be applied there.

The developer tools show the style for the for the text Test ID as

table.scrollable th, td {
width: 25%;
}
There is a stike-through on the width. The scrollable class should not be applied there but is overridden by the defined class.

I would like to know why the scrollable class is applied where I do not expect it to be.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

???

The only reference to overflow I find are on the div elements, .landingtext and .landingblocks (from memory right now).

Your source calls for a stylesheet "style-ext.css" which gets a 404 error, so can't check it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

joeabrown
joeabrown's picture
Offline
newbie
Canada
Last seen: 7 years 14 weeks ago
Canada
Timezone: GMT-4
Joined: 2014-07-04
Posts: 3
Points: 4

The definitions in

The definitions in style-ext.css are only used in one other page so I have deleted that line. Can you try again?