某些浏览器中缺少表格边框。（border-collapse）

Question

对于下表，结构表边框在某些浏览器中显示，而在某些浏览器中则不显示。

＆＃13;

＆＃13;

.test-table, table.test-table th, table.test-table td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px !important;
} 
.test-td{
  border-bottom:0px !important;
}

＆＃13;

<table class="test-table">
    <tbody>
        <tr>
            <td colspan="2">Heading 1</td>
            <td rowspan="2">Heading 2</td>
        </tr>
        <tr>
            <td>Test </td>
            <td>Test </td>
        </tr>
        <tr>
            <td colspan="2">Test</td>
            <td rowspan="2" class="test-td">Test</td>
        </tr>
        <tr>
            <td>Test</td>
            <td>Test</td>
        </tr>
        <tr>
            <td colspan="2">Test</td>
        </tr>
        <tr>
            <td colspan="2" class="common-heading">Test</td>
        </tr>
        <tr></tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

请参阅以下浏览器中表格的截图：

Firefox表

Chrome表格

Firefox表结构是正确的结构，但在Chrome中它没有正确显示。这段代码有什么问题？如何在每个浏览器中使表结构相同？

Answer 1

为该单元格设置rowspan=4，如下所示

.test-table, table.test-table th, table.test-table td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px !important;
} 
.test-td{

}

   

<table class="test-table">
  <tbody><tr>
   <td colspan="2">Heading 1</td> 
    <td rowspan="2">Heading 2</td>
  </tr>
  <tr>
    <td>Test </td>
	<td>Test </td>
  </tr>
   <tr>
   <td colspan="2">Test</td> 
   <td rowspan="4"  class="test-td">Test</td>
  </tr>
  <tr>
    <td>Test</td>
	<td>Test</td>
	 
  </tr>
 
 <tr>
    <td colspan="2">Test</td> 
  </tr>
 <tr>
    <td colspan="2" class="common-heading">Test</td>
    
  </tr>
  <tr></tr>
</tbody></table>

Answer 2

以下解决方案可能有所帮助。

您必须添加rowspan = 4

Here is the example