增加Bootstrap 4表的列宽

Question

我需要增加列宽，我尝试了width-％，PX，rem，但是这不起作用。 如果表中的列数较少，则可以增加列宽，但是在我的方案中，如果我的列数超过15，则无法更改宽度。

<div class="table-responsive">
<table class="table">
  <thead>
    <tr>

<th scope="col">#</th><th scope="col">#</th>

      <th scope="col" style="width: 500px;">Heading heading'</th><th scope="col">Heading</th>

      <th scope="col">Heading</th><th scope="col">Heading</th>

      <th scope="col">Heading</th><th scope="col">Heading</th>

      <th scope="col">Heading</th><th scope="col">Heading</th>

      <th scope="col">Heading</th><th scope="col">Heading</th>

      <th scope="col">Heading</th><th scope="col">Heading</th>

      <th scope="col">Heading</th><th scope="col">Heading</th>

      <th scope="col">Heading</th><th scope="col">Heading</th>

      <th scope="col">Heading</th><th scope="col">Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>

 <th scope="row">1</th><th scope="row">1</th>

      <td style="width: 300px;">jksdfn jhs fjidsh fj id hidsfdsfd</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>
    </tr>
   <tr>

 <th scope="row">1</th><th scope="row">1</th>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>

      <td>Cell</td><td>Cell</td>
    </tr>
  </tbody>
</table>

我需要增加下表中的第三列，即“参考”的附加图像。 我使用了Always Responsive Bootstrap 4 Table

Answer 1

您需要使用min-width而不是width 。

点击下面的“运行代码段”按钮，然后展开到整个页面：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <table class="table table-responsive"> <thead> <tr> <th scope="col">#</th> <th scope="col">#</th> <th scope="col" style="width: 500px;">Heading heading'</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <th scope="row">1</th> <td style="min-width: 300px;">jksdfn jhs fjidsh fj id hidsfdsfd</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">1</th> <th scope="row">1</th> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table>