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

Posted 2023-05-08

【中文标题】使用 jquery 引导响应表宽度问题

【英文标题】：Bootstrap responsive table width problem with jquery

【发布时间】：2021-06-19 22:11:03

【问题描述】：

我有一个如图所示的页面。单击蓝色按钮时，页面分为两列。我正在使用 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>

【参考方案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>

【讨论】：

您能分享您的网站网址，以便我查看。

该项目当前未实时运行。如果你愿意，我可以分享 AnyDesk ID

好的，分享给我看看问题

ID: 925 744 445 你可以用这个id连接