CODEWITHSUNDEEP
htmlcssxhtmlcss-tables
Bertran
Bertran

Reputation: 23

CSS reset causes tables not to look right

I applied the following CSS reset to my website's CSS stylesheet (validating as CSS 2.0 and used with XHTML 1.0 transitional webpage)

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

However, in my website I have a table that no longer looks right. More precisely, the table is now out of position and the borders (originally black) are no longer visible.

I'm wondering if I should just zap off the table, border rules ar if I can keep the reset as is and tell the browser later on to display or not the borders. My main hesitation is that I'd like to keep the same reset for all my pages and that changing the reset just for the pages that have tables (tabular data) will only make everything complicated, since I'm using a EXTERNAL STYLESHEET.

Upvotes: 1

Views: 1645

Answers (3)

dra_red
dra_red

Reputation: 442

After troubleshooting a similar issue I found that the reset css had the table property of:

border-collapse:collapse; which was causing the border not be displayed.

Adding... border-collapse:separate; to my applied css fixed the problem.

Upvotes: 1

stephenmurdoch
stephenmurdoch

Reputation: 34643

Quick fix: just remove all table code from your reset

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{

margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;}

Better fix, use a css normalizer rather than a reset: take a look at the one used by the html5boilerplate project

Upvotes: 3

Colin Fine
Colin Fine

Reputation: 3364

Unless I'm misunderstanding something (I don't know what you mean by "css reset"), you are telling it that table, td, th (and a load of other tags) are to display no borders. So why do you expect your table to have borders after that?

Upvotes: 1

Related Questions