在Bootstrap中，在显示/没有可折叠元素的情况下显示表格相同

Question

在Bootstrap 5中，我希望表显示以/没有可折叠元素的显示时显示相同的宽度。当前，当不显示可折叠元素时，它显示较短，这对用户很刺激。似乎希望它在设置宽度时考虑可折叠元素，但不知道该怎么做。

代码为

 <div class="row justify-content-end">
    <div class="col m-2">
        <button id="show_credits_button" type="btn" class="btn btn-outline-primary m-1" data-bs-toggle="collapse" data-bs-target="#credits_id">
            Show Credits
        </button>
    </div>
    <div class="col-2 ms-auto m-2">
        <span class="input-group">
            <span for="filter" id="filterlabel" class="input-group-text">
                Filter
            </span>
            <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
        </span>
    </div>
</div>

和

<div class="row g-0">
    <div class="col m-2">
        <table class="table table-sm table-hover">
            <tbody>
                <tr>
                    <td colspan="5">
                        <b>
                            Disc 1
                        </b>
                    </td>
                </tr>
                <tr class="song_id">
                    <td>
                        1
                    </td>
                    <td>
                        <div>
                            <label class="h6">
                                Take On Me
                            </label>
                        </div>
                        <div class="collapse" id="credits_id">
                            <div class="lh-1">
                                <label class="small figure-caption">
                                    Performed by 
                                </label>
                                <span>
                                    <a href="/artist.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=a-ha&amp;cid=0$=Artists$19126" class="small figure-caption">
                                        a-ha
                                    </a>
                                    <label class="small figure-caption">
                                         
                                    </label>
                                </span>
                            </div>
                    </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

与@cervus的答案类似，您正在遇到此问题，因为不滚动会更改元素的宽度，而元素的宽度没有任何约束，可以解决此问题，要解决此问题，您想将强制宽度设置为使用Bootstrap进行此操作。可以使用行和cols，如图所示：

https://codepen.io/rokasrudys/rokasrudys/pen/pen/pen/ojvrwdq

<div class="row g-0">
<table class="table table-sm table-hover">
  <thead>
    <tr>
      <td colspan="5">
        <b>
          Disc 1
        </b>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr class="song_id">
      <td class="col-1">1</td>
        <td class="col-8 col-sm-6 align-start">
          <label class="h6 ">
            Take On Me
          </label>
          <div class="collapse" id="credits_id">
            <div class="lh-1">
              <label class="small figure-caption">
                Performed by
              </label>
              <span>
                <a href="" class="small figure-caption">
                  a-ha
                </a>
                <label class="small figure-caption">

                </label>
              </span>
            </div>
          </div>
        </td>
        <td class='col-1' >
          time
        </td>
        <td class='col-1'>
          <button>queue </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

在这里您

添加ID（例如，set_width）和set width：500px！estignts;。

html：

<div class="row g-0">
    <div class="col m-2">
        <table class="table table-sm table-hover">
            <tbody>
                <tr>
                    <td colspan="5">
                      <b>Disc 1</b>
                    </td>
                </tr>
                <tr class="song_id">
                    <td>1</td>
                    <td id="set_width">
                        <div>
                            <label class="h6">Take On Me</label>
                        </div>
                        <div class="collapse" id="credits_id">
                            <div class="lh-1">
                                <label class="small figure-caption">Performed by </label>
                                <span>
                                    <a href="/artist.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=a-ha&cid=0$=Artists$19126" class="small figure-caption">a-ha</a>
                                    <label class="small figure-caption"></label>
                                </span>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

css：

#set_width {
  width: 500px !important;
}

让我知道这是否有帮助。