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以获得更好的示例：PTZ Service specifications（S代表图标）

我该如何解决？为什么只在带有文本的第一个标题上发生这种情况？

我不确定，但是我认为只有在tbody单元格中有很多文本时才会发生。

Answer 1

默认情况下，浏览器使用自动表格布局算法。列宽由单元格中最宽的不可破坏内容设置。内容将决定布局https://www.w3schools.com/cssref/pr_tab_table-layout.asp

在您的列中，“ Tecnico”是最宽的单词，因此该列将采用“ Tecnico”单词的宽度。

另一方面，如果没有足够的空间，则float元素将换行。这就是为什么图标要换行的原因。

要解决此问题，您可以在列中设置默认宽度

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

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

Answer 2

我很想将d-flex类添加到th元素中作为快速解决方案，但是为了更安全起见，我会创建一个 wrapper 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>

包装在表格标题中的浮动元素

2 个答案: