启用溢出-x时的边距：自动 - JQuery答案

【问题标题】：Margin when overflow-x: auto is enabled - JQuery启用溢出-x时的边距：自动 - JQuery
【发布时间】：2018-11-27 10:50:22
【问题描述】：

我正在尝试在启用溢出 x 时添加一些边距 (1%)。您将看到一个示例，通过调整窗口大小并在启用 overflow-x 时查看红色边框...当 x 滚动工作时，红色边框右侧的边距消失...？

可能需要一些 jquery 来完成这个。

JSFIDDLE - http://jsfiddle.net/rbla/e4rEw/32/

HTML

<div>
<div id="test">

<table>
<thead>
<tr>
    <th> Lorem ipsum  </th>
    <th> adhuc maiestatis </th>
</tr>
</thead>
    <tr>
    <td> dolor sit amet, meis solum eam ea, e  </td>
    <td> has ea, alii ipsum necessitatibus ex qui.   </td>
</tr>
</table>

</div>
</div>

CSS

table { border :3px solid red; 
        white-space: nowrap;
        width: 98%;
        margin: 0 1%;
        border-collapse: collapse;
      }

div { border: 1px dashed blue; 
      padding: 10px; 
      overflow-x: auto;
    }

JQUERY

 window.onresize = function() { 
     if ( $("div#test").outerWidth() < $("div#test").get(0).scrollWidth ) {
         console.log(" x scrollbar enabled ");
          $("div#test").css("margin-right","10%");
     } else {
         console.log(" no x scrolling :)  ");
         $("div#test").css("margin-right","0");
     }
 };

【问题讨论】：

空白：nowrap；你的桌子需要这个 CSS 吗？因此，表格在调整大小时是全宽的

标签： javascript php jquery html css

【解决方案1】：

按照其他人的建议删除此 CSS：white-space: nowrap;。因为这条线会阻止您的表格做出响应，因此会自动禁用边距。

【讨论】：