html - 某些浏览器中缺少表格边框。(边框折叠)

Question

如下表结构表格边框在某些浏览器中显示，在某些浏览器中不显示。

.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;
}

<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>

在浏览器中查看下面的表格截图:

火狐桌面

Chrome 表

Firefox 表结构是正确的结构，但在 Chrome 中显示不正确。这段代码有什么问题？如何让每个浏览器的表结构都一样？

Answer 1

为该 Cell 设置 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>