StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can try to do that as a border, but the browser support is quite limited.</p> <p>A somewhat better support would be thru a multiple background solution.</p> <pre><code>.TABLE{ width: 100%; border-spacing: 0; border-collapse: collapse; font-size: 14px; } .TABLE TR:nth-child(odd) { background: linear-gradient(to right, #ffffff 0%,#2215B3 10%,#160202 50%,#272DA8 90%,#fcfcfc 100%), lavender; background-size: 100% 1px, 100% 100%; background-position: left bottom, left top; background-repeat: no-repeat; height: 50px; } .TABLE TR:nth-child(even) { background: linear-gradient(to right, #ffffff 0%,#2215B3 10%,#160202 50%,#272DA8 90%,#fcfcfc 100%), white; background-size: 100% 1px, , 100% 100%; background-position: left bottom, left top; background-repeat: no-repeat; height: 50px; } .TABLE TD { vertical-align: middle; } </code></pre> <p>I have changed slightly the gradient colors because they where difficult to see with the gray in the odd strip.</p> <p>What i Am doing is basically set a gradient background like yours (I have used only the w3c version, but you can add prefixed versions) that is at the bottom, 1 px height.</p> <h1><a href="http://jsfiddle.net/XeFV6/" rel="nofollow">fiddle</a></h1> <p>As pointed out in the comment, there is a bug in several browsers about the dimensions of the background of a table row. This breaks the design if there are several td's.</p> <p>One posible fix is to make the row display as block: (not sure about posible side effects, will depend on all your layout)</p> <pre><code>.TABLE tr { display: block; } </code></pre> <h1><a href="http://jsfiddle.net/XeFV6/2/" rel="nofollow">fiddle</a></h1> <p>Another technique that can be used and that is probably more widely supported (and without the problem commented) would be to set the horizontal gradient in the table background. Then, in the rows, set an vertical gradient with 1 px transparency. In this transparent stripe the background will show</p> <pre><code>.test2 { width: 100%; border-spacing: 0; border-collapse: collapse; font-size: 14px; position: absolute; background: -webkit-linear-gradient(0 deg, #ffffff 0%,#2215B3 10%,red 50%,#272DA8 90%,#fcfcfc 100%); background: linear-gradient(to right, #ffffff 0%,#2215B3 10%,red 50%,#272DA8 90%,#fcfcfc 100%); } .test2 tr { height: 50px; } .test2 TR:nth-child(odd) { background: -webkit-linear-gradient(90deg, transparent 0px, transparent 1px, lavender 1px, lavender 100%); background: linear-gradient(0deg, transparent 0px, transparent 1px, lavender 1px, lavender 100%); } .test2 TR:nth-child(even) { background: -webkit-linear-gradient(90deg, transparent 0px, transparent 1px, white 1px, white 100%); background: linear-gradient(0deg, transparent 0px, transparent 1px, white 1px, white 100%); } .test2 TD { vertical-align: middle; } </code></pre> <h1><a href="http://jsfiddle.net/df9z9/5/" rel="nofollow">demo 3</a></h1>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload