在表中合併兩個排在一起，所以沒有細胞visble

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> 
 

 
\t </tr> 
 
\t <tr rowspan = "2"> 
 
\t <td> This module aims to provide a comprehensive knowledge and experience of the relational database model and 
 
\t its effective design, administration and implementation in order to to support data driven applications.</td> 
 

 
</table>

下面是什麼，我想我的桌子的樣子，我目前所面對的是什麼圖像。我不能讓錶行合併，並擺脫第一和第二行之間的分工。

這就是我想要的表看起來像：

這是我到目前爲止有：

Answer 1

設置填充和消除邊框間距會做的伎倆：

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> 
 

 
\t </tr> 
 
\t <tr> 
 
\t <td> This module aims to provide a comprehensive knowledge and experience of the relational database model and 
 
\t its effective design, administration and implementation in order to to support data driven applications.</td> 
 

 
</table>

稍微背景：用border-collapse（請參閱docs）您可以定義單元格邊界是否是分開的（如在您的問題中）或摺疊。 Rowspan僅適用於跨多行（tr）垂直擴展單元，因此在此處不做任何操作。

Answer 2

如果您有多個列，並且想要爲其中一列合併行，則可以使用rowspan。由於您只有一列，所以在這裏不能使用。

我修改了下面的幾個CSS。

table { 
 
    border-collapse:separate; 
 
    border:1px solid #ddd; 
 
    padding: 0; 
 
} 
 

 
td { 
 
    padding:2px 10px; 
 
} 
 

 
td.gray { 
 
    background:#ddd 
 
} 
 

 
td:last-child { 
 
    border-top:0 solid #ddd; 
 
}

<table cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td class="gray"> Module description </td> 
 
     
 
\t </tr> 
 
\t <tr> 
 
\t <td> This module aims to provide a comprehensive knowledge and experience of the relational database model and 
 
\t its effective design, administration and implementation in order to to support data driven applications.</td> 
 

 
</table>

Answer 3

我會做這樣的：

table { 
 
    border-spacing:0 10px; 
 
    border-collapse:collapse; 
 
} 
 
td { 
 
    padding:2px 10px; 
 
    border:1px solid #ddd; 
 
} 
 
td.gray { 
 
    background-color: gray; 
 
}

<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.Bla Bla Bla</td> 
 
    </tr> 
 
</table>

你必須在你的HTML語法一些錯誤。