为了展示更多的信息，表格可能需要在某些行上展开额外的行高度。然而，这可能会导致CSS问题，使得表格布局不正确。以下是一个示例表格：

  

    

      
姓名
      
年龄
      
地址
    
  
  

    

      
张三
      
25
      
北京市海淀区
    
    

      
李四
      
32
      
上海市浦东新区
    
    

      
张三属于北京市海淀区，那里的空气质量很好
    
  

在以上代码中，我们用了colspan属性将展开的行宽度设置为三列，以便于与普通的行区分开来。 使用以下CSS代码引入表格样式：

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr.expand {
  display: none;
}

以上代码会使表格显示得很漂亮，但是当我们想要展开行高度时，问题就来了。如果我们将CSS设置为：

tr.expand {
  display: table-row;
}

行高度将会自动展开，但是整个表格布局也会受到影响。表格的总宽度将会扩大，以适应展开的行高度。