[英]Margin when overflow-x: auto is enabled - JQuery
当启用溢出-x 时,我试图添加一些边距( 1% )。 您将通过调整窗口大小看到一个示例,并在启用溢出 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;
}
查询
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");
}
};
删除此 CSS: white-space: nowrap;
正如其他人所建议的那样。 因为此行会阻止您的表格响应,因此会自动禁用边距。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.