html - Bootstrap 表响应式叠加文本

Question

我想要一个响应式表格，它可以像响应式 Bootstrap 表格那样在溢出时滚动。我正在使用这张 table ，为什么它没有反应？所有字符都相互重叠。

<div class="table-responsive">
  <table class="table table-hover table-striped" id="materials-table">
    <thead>
        <th>ID</th>
        <th>Descritivo</th>
        <th>Qtd</th>
        <th></th>
        <th>Min</th>
        <th>Media <br> P/Instalação</th>
        <th>Fornecedor <br> Habitual</th>
        <th>Ultimo Preço</th>
        <th></th>
    </thead>
   <tbody>
    <tr>
      <td>1</td>
      <td>CALHA METALICA EM U 4x4x4</td>
      <td>
         <input type="text" size="1" value="20" class="stock-update"><span> (m)</span>
      </td>
      <td>  <a href=""><i class="fa fas fa-edit" style="font-size:1.5em; color:blue; padding-top:4px"></i></a></td>
      <td>30 <span>(m)</span>
      <td>5 <span>(m)</span></td>
      <td>Gavedra</td>
      <td>14€ <span>p/(m)</span></td>
      <td><a href=""><i class="fa fas fa-cogs" style="font-size:2em; color:blue"></i></a></td>
    </tr>
   </tbody>
  </table>
  </div>

我应该更改 Bootstrap 类中的某些内容吗？

Answer 1

我用 max-width 模拟了你的问题，但你的标记工作正常(见下面的片段)。

您可以检查以下内容:

• 使用您的浏览器网络检查器检查您自己的一些样式是否覆盖了引导类的样式
• 检查您是否申请了 positioning表格单元格或其内容的规则。看起来它们与定位的父元素对齐。

div {
  max-width: 250px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive">
  <table class="table table-hover table-striped" id="materials-table">
    <thead>
      <th>ID</th>
      <th>Descritivo</th>
      <th>Qtd</th>
      <th></th>
      <th>Min</th>
      <th>Media <br> P/Instalação</th>
      <th>Fornecedor <br> Habitual</th>
      <th>Ultimo Preço</th>
      <th></th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>CALHA METALICA EM U 4x4x4</td>
        <td>
          <input type="text" size="1" value="20" class="stock-update"><span> (m)</span>
        </td>
        <td> <a href=""><i class="fa fas fa-edit" style="font-size:1.5em; color:blue; padding-top:4px"></i></a></td>
        <td>30 <span>(m)</span>
          <td>5 <span>(m)</span></td>
          <td>Gavedra</td>
          <td>14€ <span>p/(m)</span></td>
          <td><a href=""><i class="fa fas fa-cogs" style="font-size:2em; color:blue"></i></a></td>
      </tr>
    </tbody>
  </table>
</div>