HTML/CSS 如何把我的th放在一个datatable的同一高度的同一层级？

Question

对于我的 th 的显示，我希望我的前 2 个像最后一个一样放在最上面，如果可能的话不使用绝对位置，这样红色方块总是在第一个 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/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table class="table dataTable table-hover display nowrap no-footer pb-5" id="dataTable" width="100%" cellspacing="0">
  <thead>
    <tr >
      <th data-key="from">
        <span>Firstaname</span>
        <span class="sort-icon datatable-span"/>
      </th>
      <th data-key="to">
        <span class="datatable-span" data-key-translate="common.to">Lastname</span>
        <span class="sort-icon datatable-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 class="sort-icon datatable-span"/>
      </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Answer 1

您需要为 th.

添加 vertical-align: top !important;

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table class="table dataTable table-hover display nowrap no-footer pb-5" id="dataTable" width="100%" cellspacing="0">
  <thead>
    <tr >
      <th data-key="from">
        <span>Firstaname</span>
        <span class="sort-icon datatable-span"/>
      </th>
      <th data-key="to">
        <span class="datatable-span" data-key-translate="common.to">Lastname</span>
        <span class="sort-icon datatable-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 class="sort-icon datatable-span"/>
      </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

HTML/CSS 如何把我的th放在一个datatable的同一高度的同一层级？

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

html

css

html-table

datatable

bootstrap-5