I would acheive this by using adjacent selectors, like so: table { border: 1px solid #000; } tr { border-top: 1px solid #000; } tr + tr { border-top: 1px solid red; } td { border-left: 1px solid #000; } td + td { border-left: 1px solid red; } It’s a little bit repetitive, but … 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
Remove the float, which takes the elements out of the document’s normal flow, and also add in another wrapper element, to act as the table-row: table-cell, behaves like the <td> HTML element Which implies that this requires (though I’ve not verified my inference) a display: table-row parent, as a td requires a tr parent-element. .wrap{ … Read more
This can be done using CSS with no Javascript. I used the ::after pseudo-element to do the highlighting. z-index keeps the highlighting below the <tds> in case you need to handle click events. Using a massive height allows it to cover the whole column. overflow: hidden on the <table> hides the highlight overflow. Demo: http://jsfiddle.net/ThinkingStiff/2XeYe/ … 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.
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
I think the problem is that the table box is placed inside a table wrapper box: the table generates a principal block box called the table wrapper box that contains the table box itself and any caption boxes So the table box is no longer a child of the flex container, and thus is not … 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
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
What you need to do is to put your wrapper div (the one with display: table-cell) inside another div that has display: table and table-layout: fixed. That makes both Firefox and Opera respect the max-width rule. See this example on jsFiddle.