Stylized html table with vertical scroll inside tbody

[Linkan]

Hello, this is my first post here on css-tricks.com! I figured this would be an appropriate forum for my struggle with css..

I am trying to combine the functionality of a table with vertical scroll inside tbody and a table style I got from elsewhere, but I am not particularly skilled with CSS.

Links for the code are below!

Thanks for any help!

Links:
http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody

http://codepen.io/anon/pen/bNBLGo <!– scrollable table –>

http://codepen.io/anon/pen/NPbyPw <!– sweet styled table –>

http://codepen.io/anon/pen/zxoRxb <!– my disastrous attempt –>

[trlmkb]

hey

for starters you could apply box-sizing: border-box to all elements.
then add width: 100% to the thead and width: 20% to the tbody td, thead th.

as for the /* minus scroll bar width */ part, you would need more than that, because mac os and windows (as well as linux probably) behaves differently regarding scrollbar width. basically mac os doesn’t include it, if there’s a scrollbar then it’s on top of everything and fades in/out when scrolling

[Linkan]

Thank you, I managed to make it look better. However the width of the final <th> element seems to be inconsistent with the total width of the table, it seems like it has been cropped to at the scrollbar.

Which must be because the width of thead is not 100%, however is there a way to colour the upper-right corner aswell?

If I set the width of thead to 100 % it works sort of, but then the headers are inconsistent with the labels (<td>) below corresponding to the <th> element.

So maybe if I colour the whole table with the same colour as the thead, the columns would be consistent and there wouldn’t be any whitespace?

Here is the updated version:
http://codepen.io/anon/pen/zxoRxb <!– link –>

What exactly do you mean I need to change about the thead section? An example would be much appreciated :)

Thank you for your answer!

[trlmkb]

how about this pen:
http://codepen.io/trlmkb/pen/LEbJKw

it’s not perfect and it uses javascript snippet to detect which OS you’re using and adds a class to body class.

I tried it both windows and mac os, and it looks pretty good. the difference is that windows adds a scrollbar of 17px to the tbody what makes it smaller. then thead looks out of shape and doesn’t align properly, so we need to add padding-right: 17px to thead to make it align. then we need to move the background from th to head because of the white corner, we apply the background to the whole thead rather than each th.

the javascript adds a class, which we use to detect mac os and remove the padding-right in thead. like I said mac os adds the scrollbar on top not messing with the width, to no need to make thead align, just keep thead and tbody with width: 100%

[Linkan]

Thank you trlmkb! It was really helpful. It is exactly what I needed, now I’m investigating in how to implement support for iPhone/iPad/iPod as well as support for Android phones.

I reckon the implementation would be similar to Mac OSX, because on my Android phone, the scroll bar was displayed on top of the tbody just like on a Mac. I just need to find a way to tell whether the OS of the device is Android.

Once again, thank you for all the help!

[Linkan]

I ended up with this:
http://codepen.io/anon/pen/ogYRwj <!– my final attempt –>

It is perhaps not the sexiest way to do this but at least it works!

Thanks again for helping me with my CSS trouble, I couldn’t have figured it out without your help :)

[Linkan]

Hello CSS Wizards! Today I experimented with HTML tables and populating them from a MySQL database. The current code works well standalone and the table looks something like this:

http://codepen.io/anon/pen/ogYRwj <!– table version 1.0 –>

Except that I populate the table from a MySQL database using PHP.

However when I tried to integrate the table onto my website, I ran into a major problem. I use the PHP include statement to display my table as well as my menu to swap between all my webpages. The table was displayed like this:

As I experimented with tbody.td and its width, I ended up changing this code:

thead th,tbody td {
    width: 20%;
    float: left;
    border-right: 1px solid black;
}

to this:

tbody td{
    width: 10%;
    float: left;
    border-right: 1px solid black;
}

thead th {
    width: 20%;
    float: left;
    border-right: 1px solid black;
}

And somehow it worked! But the borders between the thead.th elements didn’t line up with the borders of the tbody.td elements on other devices such as on my Android Phone, but it worked:

The table now displays correctly on Google Chrome on Windows, when I include it using the PHP statement include /path/to/file.php, but now if I try to directly view /path/to/file.php it looks really strange, similar to the first image above!

Now I can’t figure out what is wrong with the first version, and how to display it properly on other devices such as Android?

Thanks for any help!

[trlmkb]

maybe create a pen with generated html. it’s hard to tell from just that, it could be css problems, could be html..

[Linkan]

It generates the same html, however when I use the PHP include statement the result looks like this:

[MOD EDIT – Broken Image Link.]

Using this code: http://codepen.io/anon/pen/ogYRwj

<?php
include $path . '/' . $filename . '.php';
?>

where $path is the path to the $filename and $filename is the actual file containing the code for the table (e.g the code pen above) .

[Linkan]

I have put this topic on stackoverflow.com now, for anyone interested.

[Author]

Posts