Clever Geek Handbook

CSS Trick for displaying border on table and cells when cells are not empty and do not show borders otherwise

Is there a way to make sure the table and the cells it contains only have a border when the cells are not empty? If all table cells are empty, then the border should not be visible.

+1


source to share


6 answers


See empty-cells CSS.



+4


source


The only way to do this with pure CSS is through a very modern browser. You need to use advanced CSS selectors for this. For example, you can use tr: empty to find cells without any children in them, for plain text you will need to do a few more.

Unfortunately, they only exist in CSS3, so if you can't use javascript or touch the markup, then you should only be able to execute in the most recent browsers.



To learn more about CSS3 selectors Click here

+1


source


Give blank cells one class name and not blank cells another. One class indicates a border and the other does not.

0


source


As far as I know, this is not part of the CSS capabilities, the best option I can think of is to apply the classes dynamically, either via server side code when filling in the data, or via JavaScript after the page is loaded into the browser.

0


source


It looks like the empty cells property suggested by strager might do the trick. If it doesn't do what you need, I would look at using a smart javascript library like jQuery . You can probably set a binding to update the cell's border style, which will getBorderStyle (this) when the contents of that cell change.

Have a look at the jquery "change" hook here: http://docs.jquery.com/Events/change If you select all your cells (which you can do with a css selector) and add a change hook to run some function you are writing called updateBorder () or something, you should be good. I guess it would be something like this:

$("table.someClass td").change(function() { updateBorder(this) })
0


source


Rendering cell borders depends in part on whether you are squeezing the borders or not. If they are not reset, the border is not displayed by default if there is no cell content. This can be toggled using the empty-cells CSS property .

If you break borders, you lose the ability to manipulate the border based on the presence of the cell's content.

0


source






More articles:


All Articles