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。

Answer 2

在colspan td下添加div，并且该div提供标头包装类

enter image description here