CODEWITHSUNDEEP
cssfixed-header-tables
Cameron
Cameron

Reputation: 28803

Table CSS not working when using position

I am experimenting with a fixed header table (I have seen many plugins online but I want to do it myself using PURELY CSS) at http://dev.driz.co.uk/table.html

However I have two issues:

  1. The headers doesn't stretch the width of the table anymore and is no longer in sync with the table rows below. How do I fix this?

  2. I have put a border around the table and also around the table cells and so have now ended up with double borders in some places. How can I get around this? As I need the table to have the border as the cells will not always be on screen and cannot be relied on to provide the box around the table.

If someone can help, it'd be much appreciated.

Upvotes: 1

Views: 137

Answers (2)

Cameron
Cameron

Reputation: 28803

Using table-layout: fixed; solves the issues!

Upvotes: 0

hradac
hradac

Reputation: 2491

Through experimenting I've found that position:absolute on either tbody or thead is causing the issue where your table head items aren't lining up to the table data. Absolutely positioning an element breaks it out of the rendering flow of the page. So adding position:absolute to thead causes the header items to collapse to the content in them and adding it to tbody breaks the table data cells from normal flow which means thead cannot relate its cell widths to tbody's.

This is just what I've found but if I'm wrong I'm open to correction.

Upvotes: 0

Related Questions