HTML/CSS How to put my th at the same level in the same height in a datable?-CodePudding

For the display of my th, I want my first 2 ths to be put on top like the last th without using absolute position if possible so that the red square is always next to the first span

table.dataTable thead span.sort-icon {
  display: inline-block;
  padding-left: 5px;
  width: 16px;
  height: 16px;
  background-color: red;
}

table.dataTable thead .sorting span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_both.png') no-repeat center right; }
table.dataTable thead .sorting_asc span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc.png') no-repeat center right; }
table.dataTable thead .sorting_desc span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc.png') no-repeat center right; }

table.dataTable thead .sorting_asc_disabled span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc_disabled.png') no-repeat center right; }
table.dataTable thead .sorting_desc_disabled span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc_disabled.png') no-repeat center right; }

.dataTable thead th {
  position: sticky; top: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table  id="dataTable" width="100%" cellspacing="0">
  <thead>
    <tr >
      <th data-key="from">
        <span>Firstaname</span>
        <span />
      </th>
      <th data-key="to">
        <span  data-key-translate="common.to">Lastname</span>
        <span />
      </th>
      <th data-key="creator">
        <span style="" data-key-translate="common.auctionCreator">Demand</span><br>
        <span style="" data-key-translate="common.internalOnly">Duration (min)</span><br>
        <span style="" data-key-translate="common.internalOnly">Date of demand</span>
        <span />
      </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

CodePudding user response：

You need to add vertical-align: top !important; for th.

table.dataTable thead span.sort-icon {
  display: inline-block;
  padding-left: 5px;
  width: 16px;
  height: 16px;
  background-color: red;
}

table.dataTable thead .sorting span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_both.png') no-repeat center right; }
table.dataTable thead .sorting_asc span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc.png') no-repeat center right; }
table.dataTable thead .sorting_desc span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc.png') no-repeat center right; }

table.dataTable thead .sorting_asc_disabled span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc_disabled.png') no-repeat center right; }
table.dataTable thead .sorting_desc_disabled span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc_disabled.png') no-repeat center right; }

.dataTable thead th {
  position: sticky; top: 0; vertical-align: top !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table  id="dataTable" width="100%" cellspacing="0">
  <thead>
    <tr >
      <th data-key="from">
        <span>Firstaname</span>
        <span />
      </th>
      <th data-key="to">
        <span  data-key-translate="common.to">Lastname</span>
        <span />
      </th>
      <th data-key="creator">
        <span style="" data-key-translate="common.auctionCreator">Demand</span><br>
        <span style="" data-key-translate="common.internalOnly">Duration (min)</span><br>
        <span style="" data-key-translate="common.internalOnly">Date of demand</span>
        <span />
      </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>