Обтекание плавающих элементов в заголовке таблицы

Question

Я добавил иконку к заголовкам таблицы с помощью float:right, но, сделав это, он обернул текст заголовка, но только в первый.

Это действительно сбило с толку, и я не смогнайти простое исправление.

Я использую bootstrap4.css, если это имеет значение

Отрывок кода:

<thead id="header">
    <tr>
      <th class="text-center text-nowrap py-2 border-bottom" id="check-header" type="check"><input type="checkbox"></th>
      <th class="clickable text-nowrap py-2 border-bottom" scope="col" type="str" value="Tecnico">Tecnico<span class="float-right mt-1 icon-sort-solid">S</span></th>
      <th class="clickable text-nowrap py-2 border-bottom" scope="col" type="date" value="Data">Data<span class="float-right mt-1 icon-sort-solid">S</span></th>
      <th class="clickable text-nowrap py-2 border-bottom" scope="col" type="str" value="Consequencia">Consequência<span class="float-right mt-1 icon-sort-solid">S</span></th>
      <th class="clickable text-nowrap py-2 border-bottom" scope="col" type="str" value="Descricao">Descrição<span class="float-right mt-1 icon-sort-solid">S</span></th>
    </tr>
  </thead>

Но, пожалуйста, проверьте JSFiddle для лучшего примера: https://jsfiddle.net/ppgab/Lcvx1n56/1/ (S обозначает значок)

Как это исправить?И почему это происходит только в первом заголовке с текстом?

Я не уверен, но думаю, что это происходит только тогда, когда в ячейках tbody много текста.

Answer 1

Я бы хотел добавить d-flex класс к элементу th в качестве быстрого решения, но для большей безопасности я бы создал обертку div с классом d-flex (что эквивалентно созданию flexbox с display: flex) - см. демонстрацию ниже:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>


<table class="table table-sm table-hover table-striped">
  <thead id="header">
    <tr>
      <th class="text-center text-nowrap py-2 border-bottom" id="check-header" type="check"><input type="checkbox"></th>
      
      <th class="clickable text-nowrap py-2 border-bottom" scope="col" type="str" value="Tecnico">
      <div class="d-flex">
        Tecnico<span class="float-right mt-1 icon-sort-solid">S</span>
      </div>
      </th>
      
      <th class="clickable text-nowrap py-2 border-bottom" scope="col" type="date" value="Data">Data<span class="float-right mt-1 icon-sort-solid">S</span></th>
      <th class="clickable text-nowrap py-2 border-bottom" scope="col" type="str" value="Consequencia">Consequência<span class="float-right mt-1 icon-sort-solid">S</span></th>
      <th class="clickable text-nowrap py-2 border-bottom" scope="col" type="str" value="Descricao">Descrição<span class="float-right mt-1 icon-sort-solid">S</span></th>
    </tr>
  </thead>
  <tbody id="body">
    <tr class="clickable" id="1" data-oindex="0">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1487559600000">20/02/2017</td>
      <td type="str" value="contaminação do solo/ água armazenada em bandeja atraindo fauna local. podendo assim atrair animais peçonhentos.">contaminação do solo/ água armazenada em bandeja atraindo fauna local. podendo assim atrair animais peçonhentos.</td>
      <td type="str" value="Tambor combustível armazenado diretamente no solo, sem fazer uso da bacia de contenção.">Tambor combustível armazenado diretamente no solo, sem fazer uso da bacia de contenção.</td>
    </tr>
    <tr class="clickable" id="3" data-oindex="1">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1487767053000">22/02/2017</td>
      <td type="str" value="Armazenamento inadequado de produto quimico">Armazenamento inadequado de produto quimico</td>
      <td type="str" value="Baia de depósito sem extintor, sem bacia de contenção, falta FISPQ (Ficha de Informações de Segurança de Produto Químico).">Baia de depósito sem extintor, sem bacia de contenção, falta FISPQ (Ficha de Informações de Segurança de Produto Químico).</td>
    </tr>
    <tr class="clickable" id="4" data-oindex="2">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1487863508000">23/02/2017</td>
      <td type="str" value="Não cumprimento das condicionantes da ASV.">Não cumprimento das condicionantes da ASV.</td>
      <td type="str" value="Supressão Vegetal não informada.">Supressão Vegetal não informada.</td>
    </tr>
    <tr class="clickable" id="5" data-oindex="3">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1487863916000">23/02/2017</td>
      <td type="str" value="Contaminação do solo">Contaminação do solo</td>
      <td type="str" value="Moto bomba sem bandeja de contenção">Moto bomba sem bandeja de contenção</td>
    </tr>
    <tr class="clickable" id="6" data-oindex="4">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1487864582000">23/02/2017</td>
      <td type="str" value="Contaminação do solo">Contaminação do solo</td>
      <td type="str" value="Equipamento sem bandeja de contenção">Equipamento sem bandeja de contenção</td>
    </tr>
    <tr class="clickable" id="7" data-oindex="5">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1487721600000">21/02/2017</td>
      <td type="str" value="Não cumprimento das condicionantes da ASV.">Não cumprimento das condicionantes da ASV.</td>
      <td type="str" value="Supressão Vegetal não informada.">Supressão Vegetal não informada.</td>
    </tr>
    <tr class="clickable" id="9" data-oindex="6">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1487767769000">22/02/2017</td>
      <td type="str" value="Vazamento de material contaminante ">Vazamento de material contaminante </td>
      <td type="str" value="Bacia de contenção inadequada">Bacia de contenção inadequada</td>
    </tr>
    <tr class="clickable" id="10" data-oindex="7">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1487765676000">22/02/2017</td>
      <td type="str" value="proliferação de doenças ">proliferação de doenças </td>
      <td type="str" value="caixa separador A/O sem cobertura podendo atrair vetores.">caixa separador A/O sem cobertura podendo atrair vetores.</td>
    </tr>
    <tr class="clickable" id="11" data-oindex="8">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1489776397000">17/03/2017</td>
      <td type="str" value="null">null</td>
      <td type="str" value="resíduos sólidos armazenados de forma inadequada desobedecendo o pgrs">resíduos sólidos armazenados de forma inadequada desobedecendo o pgrs</td>
    </tr>
    <tr class="clickable" id="17" data-oindex="9">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1489776586000">17/03/2017</td>
      <td type="str" value="proliferação de vetores">proliferação de vetores</td>
      <td type="str" value="pneus armazenando em área descoberta ">pneus armazenando em área descoberta </td>
    </tr>
    <tr class="clickable" id="18" data-oindex="10">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1487767981000">22/02/2017</td>
      <td type="str" value="Contaminação do solo">Contaminação do solo</td>
      <td type="str" value="Bacia de contencao inadequada ">Bacia de contencao inadequada </td>
    </tr>
    <tr class="clickable" id="19" data-oindex="11">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="1">1</td>
      <td type="date" value="1487767466000">22/02/2017</td>
      <td type="str" value="proliferação de vetores ">proliferação de vetores </td>
      <td type="str" value="Armazenamento de água sem cobertura da caixa ">Armazenamento de água sem cobertura da caixa </td>
    </tr>
    <tr class="clickable" id="20" data-oindex="12">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1488825782000">06/03/2017</td>
      <td type="str" value="null">null</td>
      <td type="str" value="atividade sem acompanhamento da equipe da fauna e flora">atividade sem acompanhamento da equipe da fauna e flora</td>
    </tr>
    <tr class="clickable" id="21" data-oindex="13">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1488910428000">07/03/2017</td>
      <td type="str" value="Autuação Ambiental">Autuação Ambiental</td>
      <td type="str" value="Método de recuperação inadequado.  Não atende especificações do PBA.">Método de recuperação inadequado. Não atende especificações do PBA.</td>
    </tr>
    <tr class="clickable" id="24" data-oindex="14">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1489494694000">14/03/2017</td>
      <td type="str" value="Contaminação do solo">Contaminação do solo</td>
      <td type="str" value="Equipamento com vazamento de óleo">Equipamento com vazamento de óleo</td>
    </tr>
    <tr class="clickable" id="25" data-oindex="15">
      <td class="text-center"><input class="row-select" type="checkbox"></td>
      <td type="str" value="2">2</td>
      <td type="date" value="1490366495000">24/03/2017</td>
      <td type="str" value="Contaminação do solo e da água">Contaminação do solo e da água</td>
      <td type="str" value="Bandeja de contenção inadequada, apresentando rachaduras">Bandeja de contenção inadequada, apresentando rachaduras</td>
    </tr>
  </tbody>
</table>

Answer 2

По умолчанию браузеры используют алгоритм автоматической разметки таблицы.Ширина столбца задается самым широким неразрывным содержимым в ячейках.Содержимое будет определять макет https://www.w3schools.com/cssref/pr_tab_table-layout.asp

В вашем столбце "Tecnico" самое широкое слово, поэтому столбец будет принимать ширину слова "Tecnico" ..

С другой стороны, элементы с плавающей точкой будут занимать новую строку, если недостаточно места.Вот почему значок переходит на новую строку.

Чтобы решить эту проблему, вы можете установить ширину по умолчанию в вашем столбце

#header [value="Tecnico"] {
  width: 150px;
}

https://jsfiddle.net/RACCH/x1jh73em/