html - Merging two rows together in a table so that no cells are visble -
table { border-spacing:0 10px; border-collapse:separate; } td { padding:2px 10px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; } td.gray { background:#ddd } td:last-child { border-right:1px solid #ddd; }
<table> <tr> <td class="gray"> module description </td> </tr> <tr rowspan = "2"> <td> module aims provide comprehensive knowledge , experience of relational database model , its effective design, administration , implementation in order to support data driven applications.</td> </table>
below images of want table , have @ moment. cant table rows merge , rid of division between first , second row.
this want table like:
this have far:
setting padding , removing border-spacing trick:
table { border: 1px solid #ddd; padding: 0; border-collapse: collapse; } td { padding: 2px 10px; } td.gray { background:#ddd }
<table> <tr> <td class="gray"> module description </td> </tr> <tr> <td> module aims provide comprehensive knowledge , experience of relational database model , its effective design, administration , implementation in order to support data driven applications.</td> </table>
a little background: border-collapse
(see docs) define whether cell borders separate (like in question) or collapsed. rowspan
works expanding cell vertically across more 1 row (tr) , hence did not here.
Comments
Post a Comment