Will Mannix Will Mannix - 1 month ago 6
CSS Question

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> This module aims to provide a comprehensive knowledge and experience of the relational database model and
its effective design, administration and implementation in order to to support data driven applications.</td>

</table>





Below are the images of what I want my table to look like and what I have at the moment. I cant get the table rows to merge and get rid of the division between the first and second row.

This is what I want the table to look like:
This is what I want the table to look like

This is what I have so far:
This is what I have so far.

Answer

Setting the padding and removing the border-spacing will do the 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> This module aims to provide a comprehensive knowledge and experience of the relational database model and 
	its effective design, administration and implementation in order to to support data driven applications.</td>

</table>

A little background: with border-collapse (see docs) you define whether cell borders are separate (like in your question) or collapsed. Rowspan only works for expanding a cell vertically across more than one row (tr) and hence did not do anything here.

Comments