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

- ganesh

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>

- WebDevBooster