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

Добавьте div в colspan td, и этот div даст класс переноса заголовка

введите описание изображения здесь

Answer 2

Очевидно, что display: flex является виновником здесь.Вы видите, если стиль <td> с display:flex фактически заменяет отображаемое значение по умолчанию: display: table-cell Следовательно, <td> не будет рассматриваться как элемент ячейки таблицы.

Решение: поместите другой элементвнутри <td> и сделайте так, чтобы он отображался как гибкий.