Colspan 在 html5 表中无法正常工作

Question

我在将第一行与 colspan 对齐时遇到问题，它不能正确地 colspan。这是结果：

    .header-wrap {
      display: flex;                  
      align-items: flex-start;        
      justify-content: space-between; 
    }
    
    .header-blue   { margin-bottom: 50px; background-color: #3498DB; color: #fff; }
    .header-left   { width: 400px; text-align: left; }
    .header-left > h3 {margin: 5px 0 !important;}
    .header-right  { width: 400px; text-align: right; }
    .header-center { width: 400px; text-align: center; }

    <table class="table table-bordered box-shadow--6dp">
      <tr class="header-blue">
        <td colspan="4" class="header-wrap">
          <div class="header-left"><h3>{{ recom.name }}</h3></div>
          <div class="header-center"><b>note:</b> {{ recom.note | displayEmpty }}</div>
          <div class="header-right"><b>Date:</b> {{ recom.date }}</div>
        </td>
      </tr>
      <tr>
        <td></td>
        <td scope="head">UREA/Organic Manure</td>
        <td scope="head">DAP</td>
        <td scope="head">MOP</td>
      </tr>
    </table>

---

但是当我尝试取消注释下面的代码时，colspan 可以工作，但对齐被破坏。

.header-wrap {
/*  display: flex;                  
  align-items: flex-start;        
  justify-content: space-between; */
}

Answer 1

显然，这display: flex是这里的罪魁祸首。您会看到您的样式是否<td>实际上display:flex替换了默认显示值： display: table-cell 因此，<td>不会将其视为表格单元格元素。

解决方案：将另一个元素放入其中<td>并使其显示为flex。