html 寬度不固定的table 橫向滾動

最近遇到的一個小問題：頁面Model嵌套一個動態table，table列根據后台數據動態渲染，不固定，當列過多時會出現table橫向溢出。

想到了加橫向滾動條：overflow-x: auto; 能解決橫向溢出問題。但是當瀏覽器大小改變時，Model的寬度動態改變，這時橫向滾動條就會顯示異常。

查了相關的文章，最終解決了，記錄下來，方便以后查找。最終效果如下圖。

demo 代碼

省略了業務代碼，只保留了核心部分。

<!-- Model div -->
<div class="model-wraapper">
    <!-- Table div 容器 -->
    <div class="table-wrappler">
        <div>
            <b>Test Table</b>
        </div>
        <div>
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Test Date</th>
                        <th">
                            <p><span>Yes/No ?</span></p>
                        </th>
                        <th>
                            <p><span>bb</span></p>
                            <p style="font-size:10px;color:#576170"><span> ( 14-12 )</span></p>
                        </th>
                        <th>
                            <p><span>Date Test</span></p>
                        </th>
                        <th>
                            <p><span>Date Time</span></p>
                        </th>
                        <th>
                            <p><span>cc</span></p>
                            <p style="font-size:10px;color:#576170"><span> ( 14.2%-13.6% )</span></p>
                        </th>
                        <th>
                            <p><span>Integer Test</span></p>
                            <p style="font-size:10px;color:#576170"><span> ( 1-6 )</span></p>
                        </th>
                        <th>
                            <p><span>DD DD DD</span></p>
                            <p style="font-size:10px;color:#576170"><span> ( 14.3-23.6 )</span></p>
                        </th>
                        <th>
                            <p><span>FF FF</span></p>
                            <p style="font-size:10px;color:#576170"><span> ( sdfs-werer )</span></p>
                        </th>
                        <th trn="" style="padding:3px 5px;width:150px">Entered By</th>
                        <th trn="" style="padding:3px 5px;width:3%"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr >
                        <td></td>
                    </tr>
                    <tr>
                        <td>delte-icon</td>
                        <td  style="padding:3px 5px"> 11/25/2021 6:43 PM </td>
                        <td  style="padding:3px 5px"><span>Yes </span></td>
                        <td  style="padding:3px 5px"><span> 12 </span></td>
                        <td  style="padding:3px 5px"><span>11/18/2021</span></td>
                        <td  style="padding:3px 5px"><span>11/24/2021 9:42 AM</span></td>
                        <td  style="padding:3px 5px"><span>14.3%</span></td>
                        <td  style="padding:3px 5px"><span> 2 </span></td>
                        <td  style="padding:3px 5px"><span> 12.3 </span></td>
                        <td  style="padding:3px 5px"><span> dfsdf </span></td>
                        <td  style="padding:3px 5px"> XiaoBailong </td>
                        <td  style="padding:3px 5px"></td>
                    </tr>
                    <tr>
                        <td>delte-icon</td>
                        <td   style="padding:3px 5px"> 11/25/2021 6:51 PM </td>
                        <td  style="padding:3px 5px"><span>No </span></td>
                        <td  style="padding:3px 5px"><span> 11 </span></td>
                        <td  style="padding:3px 5px"><span>11/10/2021</span></td>
                        <td  style="padding:3px 5px"><span>11/10/2021 9:51 AM</span></td>
                        <td  style="padding:3px 5px"><span>15.23%</span></td>
                        <td  style="padding:3px 5px"><span> 2.2 </span></td>
                        <td  style="padding:3px 5px"><span> 12.6 </span></td>
                        <td  style="padding:3px 5px"><span> 112 </span></td>
                        <td   style="padding:3px 5px"> XiaoBailong  </td>
                        <td   style="padding:3px 5px"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

思路

1. table的外層div樣式設置為 橫向內容大於div寬度時變成滾條的形式並且寬度設置一個初始值：overflow-x: auto; width: 660px;
2. 每次瀏覽器尺寸發生改變時，獲取一次Modle的寬度，根據Model的寬計算出table外層div的寬度，改變div的寬度

最終代碼

• html 代碼

<!-- Model div -->
<div class="form-wraapper">
    <!-- Table wrapper：橫向內容大於div寬度時變成滾條的形式並且寬度設置一個初始值  -->
    <div class="table-wrappler" style="overflow-x: auto; width: 660px;">
        <div>
            <b>Test Table</b>
        </div>
        <div>
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Test Date</th>
                        <th">
                            <p><span>Yes/No ?</span></p>
                        </th>
                        <th>
                            <p><span>bb</span></p>
                            <p style="font-size:10px;color:#576170"><span> ( 14-12 )</span></p>
                        </th>
                        <th>
                            <p><span>Date Test</span></p>
                        </th>
                        <th>
                            <p><span>Date Time</span></p>
                        </th>
                        <th>
                            <p><span>cc</span></p>
                            <p style="font-size:10px;color:#576170"><span> ( 14.2%-13.6% )</span></p>
                        </th>
                        <th>
                            <p><span>Integer Test</span></p>
                            <p style="font-size:10px;color:#576170"><span> ( 1-6 )</span></p>
                        </th>
                        <th>
                            <p><span>DD DD DD</span></p>
                            <p style="font-size:10px;color:#576170"><span> ( 14.3-23.6 )</span></p>
                        </th>
                        <th>
                            <p><span>FF FF</span></p>
                            <p style="font-size:10px;color:#576170"><span> ( sdfs-werer )</span></p>
                        </th>
                        <th trn="" style="padding:3px 5px;width:150px">Entered By</th>
                        <th trn="" style="padding:3px 5px;width:3%"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr >
                        <td></td>
                    </tr>
                    <tr>
                        <td>delte-icon</td>
                        <td  style="padding:3px 5px"> 11/25/2021 6:43 PM </td>
                        <td  style="padding:3px 5px"><span>Yes </span></td>
                        <td  style="padding:3px 5px"><span> 12 </span></td>
                        <td  style="padding:3px 5px"><span>11/18/2021</span></td>
                        <td  style="padding:3px 5px"><span>11/24/2021 9:42 AM</span></td>
                        <td  style="padding:3px 5px"><span>14.3%</span></td>
                        <td  style="padding:3px 5px"><span> 2 </span></td>
                        <td  style="padding:3px 5px"><span> 12.3 </span></td>
                        <td  style="padding:3px 5px"><span> dfsdf </span></td>
                        <td  style="padding:3px 5px"> XiaoBailong </td>
                        <td  style="padding:3px 5px"></td>
                    </tr>
                    <tr>
                        <td>delte-icon</td>
                        <td   style="padding:3px 5px"> 11/25/2021 6:51 PM </td>
                        <td  style="padding:3px 5px"><span>No </span></td>
                        <td  style="padding:3px 5px"><span> 11 </span></td>
                        <td  style="padding:3px 5px"><span>11/10/2021</span></td>
                        <td  style="padding:3px 5px"><span>11/10/2021 9:51 AM</span></td>
                        <td  style="padding:3px 5px"><span>15.23%</span></td>
                        <td  style="padding:3px 5px"><span> 2.2 </span></td>
                        <td  style="padding:3px 5px"><span> 12.6 </span></td>
                        <td  style="padding:3px 5px"><span> 112 </span></td>
                        <td   style="padding:3px 5px"> XiaoBailong </td>
                        <td   style="padding:3px 5px"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

• js 代碼

 // 獲取到Model寬度，計算並改變table-wrapper寬度
 function ResetSeriesFormWidth() {
      const modelWraapperNode = document.querySelector(".model-wraapper");
      const tableWrapplerNode = document.querySelector(".table-wrappler");
      if (modelWraapperNode && tableWrapplerNode ) {
          const modelWraapperWidth = modelWraapperNode .clientWidth;
          tableWrapplerNode .style.width = `${modelWraapperWidth - 2}px`;
      }
  }

 // 綁定到 window.onresize，窗體大小改變時調用
 window.onresize = ResetSeriesFormWidth;

參考

1. js | javascript實現瀏覽器窗口大小被改變時觸發事件的方法