增加 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>

我需要增加下表中的第三列，附上图片供参考。 我使用过始终响应式 Bootstrap 4 表

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>