html - 将两行合并到一个表中，以便看不到任何单元格(Merging two rows together in a table so that no cells are visible)

Question

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

(这是我到目前为止的内容：)

  ask by Will Mannix translate from so

Answer 1

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.

(一些背景知识：使用border-collapse （请参阅docs ），您可以定义单元格边框是分开的（如您的问题）还是折叠的。)

Rowspan only works for expanding a cell vertically across more than one row (tr) and hence did not do anything here.

(Rowspan仅适用于在一个以上的行（tr）上垂直扩展一个单元格，因此在此不做任何事情。)