使用 jquery 引导响应表宽度问题

Question

我有一个如图所示的页面。单击蓝色按钮时，页面分为两列。我正在使用 jquery 将页面分成两列并更改类名（col-md-12、col-md-6）。当页面减半时，左边的表格溢出。当页面全屏时，表格工作正常。我该如何解决这个问题？提前致谢。

我的代码在这里：

$("#toggle-history").click(function () {
    if (isPageHalf) {
        $(".kredi-limitiniz").attr("class", "col-lg-3 kredi-limitiniz");
        $(".kredi-karti-limitiniz").attr("class", "col-lg-3 kredi-karti-limitiniz");
        $(".kmh-card-1").attr("class", "col-lg-3 kredi-karti-limitiniz");
        $(".borclanma-detay-sol").attr("class", "col-md-6 borclanma-detay-sol");
        $(".borclanma-detay-sag").attr("class", "col-md-6 borclanma-detay-sag text-dark");
        $(".detail-widget:nth-child(1)").attr("class", "detail-widget col-xl mr-xl-2 mb-xxl-2 text-white d-flex flex-column justify-content-center");
        $(".detail-widget:nth-child(2)").attr("class", "detail-widget col-xl mr-xl-2 d-flex flex-column justify-content-center");
        $(".detail-widget:nth-child(3)").attr("class", "detail-widget col-xl mr-xl-2 d-flex flex-column justify-content-center");
        $(".detail-widget:nth-child(4)").attr("class", "detail-widget col-xl d-flex flex-column justify-content-center");
        $(".ozet-sol").attr("class", "col-lg-6 ozet-sol");
        $(".ozet-sag").attr("class", "col-lg-6 ozet-sag");
        $(".ozet-rapor-container").attr("class", "col-md-12 ozet-rapor-container px-0 d-flex")
        $(".report-history").hide();
        
        isPageHalf = false
    } else {
        $(".report-history").show();
        $(".kredi-limitiniz").attr("class", "col-lg-9 mb-4 kredi-limitiniz");
        $(".kredi-karti-limitiniz").attr("class", "col-lg-9 mb-4 kredi-karti-limitiniz");
        $(".kmh-card-1").attr("class", "col-lg-9 kredi-karti-limitiniz");
        $(".borclanma-detay-sol").attr("class", "col-md-12 borclanma-detay-sol ");
        $(".borclanma-detay-sag").attr("class", "col-md-12 borclanma-detay-sag text-dark");
        $(".detail-widget:nth-child(1)").attr("class", "detail-widget col-xl-12 mr-xl-2 mb-xxl-2 text-white d-flex flex-column justify-content-center mb-2");
        $(".detail-widget:nth-child(2)").attr("class", "detail-widget col-xl-12 mr-xl-2 d-flex flex-column justify-content-center mb-2");
        $(".detail-widget:nth-child(3)").attr("class", "detail-widget col-xl-12 mr-xl-2 d-flex flex-column justify-content-center mb-2");
        $(".detail-widget:nth-child(4)").attr("class", "detail-widget col-xl-12 d-flex flex-column justify-content-center mb-2");
        $(".ozet-sol").attr("class", "col-lg-12 ozet-sol");
        $(".ozet-sag").attr("class", "col-lg-12 ozet-sag");
        $(".ozet-rapor-container").attr("class", "col-md-12 ozet-rapor-container px-0 d-flex flex-column")
        
        isPageHalf = true;
    }

    if ($(".alt-content").hasClass("col-md-12")) {
        const report = $(".alt-content").html();
        $(".report-history").html(report);
        $("#ozetraporcontainer").attr("class","col-md-12 ozet-rapor-container px-0")
        $(".alt-content").attr('class', 'col-md-6 alt-content');
        $(".report-history").attr('class', 'col-md-6 report-history');
        $(".content-container").css({
            "display": "flex",
            //"flex-direction": "column"
        });
        $(".alt-content").css({
            "display": "flex",
            //"align-self": "flex-end"
        })
     
    } else {
       
        $(".alt-content").attr('class', 'col-md-12 alt-content');
        $(".report-history").attr('class', 'report-history');
        $(".content-container").css({
            "display": "flex",
            //"flex-direction": "column"
        });
        $(".alt-content").css({
            "display": "block",
        })
        
    }
    window.areaChartKapali.redraw();
    window.areaChart.redraw();
    window.donutChart.redraw();
    window.donutChartKapali.redraw();
    window.urunToplamDonut.redraw();
   
})

<table class="table table-bordered table-responsive-md">
  <thead>
    <tr>
      <th scope="col">Açılış Tarihi</th>
      <th scope="col">Referans No</th>
      <th scope="col">Borçlu / Kefil</th>
      <th scope="col">Güncellenme Tarihi</th>
      <th scope="col">Banka</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>24.03.2017</td>
      <td>TIZTWGFOVBPHZ1</td>
      <td>Borçlu</td>
      <td>15.01.2021</td>
      <td><a href="javascript:void(0)">Bu ürün hangi bankada?</a></td>
    </tr>
  </tbody>
</table>

Answer 1

问题不在于您的 jQuery 代码。您错误地编写了 html 类。就像table-responsive-md 类写在桌子上一样。此类必须添加到表的父 div 中。如下所示。

稍后谢谢我。

<div class="table-responsive-md">
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Açılış Tarihi</th>
      <th scope="col">Referans No</th>
      <th scope="col">Borçlu / Kefil</th>
      <th scope="col">Güncellenme Tarihi</th>
      <th scope="col">Banka</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>24.03.2017</td>
      <td>TIZTWGFOVBPHZ1</td>
      <td>Borçlu</td>
      <td>15.01.2021</td>
      <td><a href="javascript:void(0)">Bu ürün hangi bankada?</a></td>
    </tr>
  </tbody>
</table>
</div>