The CSS table model is based on the HTML table model http://www.w3.org/TR/CSS21/tables.html A table is divided into ROWS, and each row contains one or more cells. Cells are children of ROWS, they are NEVER children of columns. “display: table-column” does NOT provide a mechanism for making columnar layouts (e.g. newspaper pages with multiple columns, where … Read more
Steven is right, in theory: the “correct” way to center a table using CSS. Conforming browsers ought to center tables if the left and right margins are equal. The simplest way to accomplish this is to set the left and right margins to “auto.” Thus, one might write in a style sheet: table { margin-left: … Read more
You can use border-spacing property: HTML: <div class=”table”> <div class=”row”> <div class=”cell”>Cell 1</div> <div class=”cell”>Cell 2</div> </div> </div> CSS: .table { display: table; border-collapse: separate; border-spacing: 10px; } .row { display:table-row; } .cell { display:table-cell; padding:5px; background-color: gold; } JSBin Demo Any other option? Well, not really. Why? margin property is not applicable to display: … Read more
Align the table to center. <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <td align=”center”> Your Content </td> </tr> </table> Where you have “your content” if it is a table, set it to the desired width and you will have centred content.
A word of warning: though padding-right might solve your particular (visual) problem, it is not the right way to add spacing between table cells. What padding-right does for a cell is similar to what it does for most other elements: it adds space within the cell. If the cells do not have a border or … Read more
Try using the overflow CSS property. There are also separate properties to define the behaviour of just horizontal overflow (overflow-x) and vertical overflow (overflow-y). Since you only want the vertical scroll, try this: table { height: 500px; overflow-y: scroll; } EDIT: Apparently <table> elements don’t respect the overflow property. This appears to be because <table> … Read more
How about tr {outline: thin solid black;}? Works for me on tr or tbody elements, and appears to be compatible with the most browsers, including IE 8+ but not before.
This is what the THEAD element is for. Official docs here.
Another option is, instead of floating, to set the white-space property nowrap to a parent div: .parent { white-space: nowrap; } and reset the white-space and use an inline-block display so the divs stay on the same line but you can still give it a width. .child { display:inline-block; width:300px; white-space: normal; } Here is … Read more
/* cellpadding */ th, td { padding: 5px; } /* cellspacing */ table { border-collapse: separate; border-spacing: 5px; } /* cellspacing=”5″ */ table { border-collapse: collapse; border-spacing: 0; } /* cellspacing=”0″ */ /* valign */ th, td { vertical-align: top; } /* align (center) */ table { margin: 0 auto; }