Keep spacers even in a table
I have x
number of columns in a table that take up exactly 375px horizontally. I want to put spacers between them so that the elements span all the way across a variable width. How is this most easily accomplished? I'm open to use jQuery. I'd prefer using CSS for it though.
If I didn't make it clear, the columns are each 375px wide.
Are the columns with content of a fixed or standard width? A table's cells will fill the width of the table, so either
a) provide a standard width for your content cells, and let the spacers calculate their own width based on what is left of the table's total width
b) for every spacer cell, provide a standard width, and leave the widths of the content cells alone, or at least one content cell alone, so that it fills the available width
For what it's worth, when I use tables I try and let the tables do the calculating where possible.
If I understood your question correctly you could to set the td width to 100 / x
percent.
If you have many tables with different amount of columns it'd be easier to set it dynamically with jquery. Otherwise you could do it in css.
That sounds a lot like the flexible box model (or FlexBox, if I'm not mistaken). You can get it running with just CSS. Unfortunately, IIRC it only works natively with HTML 5 (or CSS 3, rather). Here's a good intro to it via Smashing Magazine.
The good news is that there are jQuery plugins / Javascript libraries out there that emulate it for less-capable browsers. Smashmag suggests Flexie.
精彩评论