jQuery 数据表和不需要的水平滚动条的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22950043/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problems with Datatables and unwanted Horizontal scrollbar
提问by Dunderklumpen
Im hoping this is a fairly simple problem.
我希望这是一个相当简单的问题。
Im trying to use Datatables to create a table without any horizontal scrolling. The table has some long data rows which I need to keep on one line and hide the overflow.
我试图使用 Datatables 创建一个没有任何水平滚动的表格。该表有一些长数据行，我需要将它们保留在一行上并隐藏溢出。
It seems like I'm missing something fairly basic with datatables here, but I can't seem to get rid of the horizontal scrollbar when the table gets a vertical scrollbar.
似乎我在这里缺少数据表的一些基本内容，但是当表格获得垂直滚动条时，我似乎无法摆脱水平滚动条。
There are two tables (identical data), both are initialised very simply.
有两个表（相同的数据），都非常简单地初始化。
$('#mytable').dataTable({
bFilter: false,
bInfo: false,
bPaginate: false,
});
$('#mytable2').dataTable({
bFilter: false,
bInfo: false,
bPaginate: false,
sScrollY: '150px'
});
The styles for the page are fairly straight forward
页面的样式相当简单
body {
height:100%;
color: #000000;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 10pt;
background-color: #B4D4EC;
}
.main-panel {
display:block;
background:white;
padding:20px;
height: 100%;
position:absolute;
width: 700px;
top: 139px;
bottom: 110px;
}
th {
text-align:left;
}
td {
border-spacing:0;
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow:ellipsis;
}
回答by Dunderklumpen
In the end the best solution was to set the width of the inner table to:
最后最好的解决方案是将内表的宽度设置为：
table-layout:fixed;
width: 98% !important;
All solutions listed here had undesirable cropping behavior. Limiting the table width in this way also allowed me to dynamically adjust the height of the table such that the horizontal scrollbar can appear or disappear on demand without introducing an horizontal scroll.
此处列出的所有解决方案都有不良的裁剪行为。以这种方式限制表格宽度还允许我动态调整表格的高度，以便水平滚动条可以按需出现或消失，而无需引入水平滚动条。
回答by bHyman
.dataTables_scrollBody
{
overflow-x:hidden !important;
overflow-y:auto !important;
}
this worked for me for all of my tables. This was also only an issue with firefox and IE, chrome handled it just fine to begin with.
这对我所有的桌子都有效。这也只是 Firefox 和 IE 的一个问题，chrome 一开始就处理得很好。
回答by jsea
You can just add overflow-x: hidden;to the .dataTables_scrollBodyif you can't find something that fixes it natively in the script. Unfortunately, you'll probably also need to use !importantto raise its specificity higher than the inline styles applied to the element already.
如果您在脚本中找不到可以本地修复它的东西，您可以添加overflow-x: hidden;到.dataTables_scrollBody。不幸的是，您可能还需要使用!important来提高其比已经应用于元素的内联样式更高的特异性。
回答by Bigalow
You can use the css tag overflow-x:hidden;to remove the horizontal scrollbar on the table with id mytable2.
您可以使用 css 标签overflow-x:hidden;删除带有 id 的表格上的水平滚动条mytable2。
#mytable2
{
overflow-y:scroll;
overflow-x:hidden;
}
However, if you use table-layout:fixedthis won't work, a majority of the browsers will treat the overflow in their naturual behaviour rather than watching the css.
但是，如果您使用table-layout:fixed它不起作用，大多数浏览器将在其自然行为中处理溢出而不是观察 css。
Some info on table-layout:fixedby Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
table-layout:fixedMozilla 的一些信息：https: //developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Example fiddle: http://jsfiddle.net/FBpLA/9/
小提琴示例：http: //jsfiddle.net/FBpLA/9/
回答by Drew Marshburn
Datatables by default calculates the width of the table and applies it as an inline style to the table element (this is called autoWidth). Thus, you may have issues in forcing the table to respect any width settings you provide without disabling this. (See here.) Set autoWidth: falsein the table settings to disable it.
默认情况下，数据表计算表格的宽度并将其作为内联样式应用于表格元素（这称为autoWidth）。因此，在不禁用此功能的情况下，您可能会在强制表格遵守您提供的任何宽度设置时遇到问题。（请参阅此处。）autoWidth: false在表设置中设置以禁用它。
You can then apply width stylings to the dataTables_scrollBodyor table. For example:
然后，您可以将宽度样式应用到dataTables_scrollBody或 表格。例如：
.dataTables_scrollBody {
width: 98%
}
This should prevent any cropping resulting from disabling horizontal scrolling while ensuring the inline width doesn't mess up settings you provide. You can also avoid using !important.
这应该可以防止由于禁用水平滚动而导致的任何裁剪，同时确保行内宽度不会弄乱您提供的设置。您还可以避免使用!important.
回答by Felipe
You have to edit css atributes od the div contains the table label before initialize the table.
在初始化表格之前，您必须编辑 css 属性 od div 包含表格标签。
$('.table-div-container').css({'overflow-x': 'hidden','border': 'none'});
