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 want table like

this have far: 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

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -