Wednesday, August 7, 2013

colspan not working in css table

colspan not working in css table

I'm trying to achieve a table where the first column is twice as long as
the remaining two columns. When I apply colspan=2 to the table it does
nothing
Code in action
http://jsfiddle.net/US96B/
Raw code below
<div class="datagrid"><table>';
<thead><tr><th
colspan="2">header</th><th>header</th><th>header</th></tr></thead>
<tfoot><tr><td colspan="4"><div
id="no-paging">&nbsp;</div></tr></tfoot>
<tbody><tr><td
colspan="2">data</td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
</tbody>
</table></div>
The CSS
.datagrid table { border-collapse: collapse; text-align: left; width:
100%; } .datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff; overflow: hidden; border: 1px solid #5492A2;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}.datagrid table td, .datagrid table th { padding: 10px 0px; }.datagrid
table thead th {background:-webkit-gradient( linear, left top, left
bottom, color-stop(0.05, #288096), color-stop(1, #288096)
);background:-moz-linear-gradient( center top, #288096 5%, #288096 100%
);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#288096',
endColorstr='#288096');background-color:#288096; color:#FFFFFF; font-size:
18px; font-weight: bold; border-left: 1px solid #0070A8; } .datagrid table
thead th:first-child { border: none; }.datagrid table tbody td { color:
#D4D2D2; border-left: 1px solid #D4D2D2;font-size: 16px;border-bottom: 1px
solid #E1EEF4;font-weight: normal; }.datagrid table tbody td:first-child {
border-left: none; }.datagrid table tbody tr:last-child td {
border-bottom: none; }.datagrid table tfoot td div { border-top: 1px solid
#5492A2;background: #FFFFFF;} .datagrid table tfoot td { padding: 0;
font-size: 18px } .datagrid table tfoot td div{ padding: 0px; }

No comments:

Post a Comment