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

在colspan td下添加div，并且div给出了header-wrap类

enter image description here

Answer 2

显然，display: flex是罪魁祸首。你看看你用<td>设置display:flex的样式实际上是替换了默认的显示值：display: table-cell因此<td>不会被视为表格单元格元素。

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