Проблемы с Datatables и нежелательной горизонтальной полосой прокрутки

Я надеюсь, что это довольно простая проблема.

Я пытаюсь использовать Datatables для создания таблицы без горизонтальной прокрутки. В таблице есть несколько длинных строк данных, которые мне нужно держать в одной строке и скрывать переполнение.

Кажется, что я пропускаю что-то довольно простое с datatables здесь, но я не могу избавиться от горизонтальной полосы прокрутки, когда таблица получает вертикальную полосу прокрутки.

http://jsfiddle.net/FBpLA/3/

Есть две таблицы (идентичные данные), обе инициализируются очень просто.

$('#mytable').dataTable({
    bFilter: false,
    bInfo: false,
    bPaginate: false,
});

$('#mytable2').dataTable({
    bFilter: false,
    bInfo: false,
    bPaginate: false,
    sScrollY: '150px'
});

Стили для страницы довольно прямолинейны

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;
 }

Ответы

Ответ 1

В итоге лучшим решением было установить ширину внутренней таблицы:

table-layout:fixed;
width: 98% !important;

Все перечисленные здесь решения имели нежелательное поведение обрезки. Ограничение ширины таблицы таким образом также позволило мне динамически регулировать высоту таблицы таким образом, чтобы горизонтальная полоса прокрутки могла появляться или исчезать по требованию без введения горизонтальной прокрутки.

http://jsfiddle.net/FBpLA/15/

Ответ 2

Вы можете просто добавить overflow-x: hidden; в .dataTables_scrollBody, если вы не можете найти что-то, что исправляет его изначально в script. К сожалению, вам, вероятно, также потребуется использовать !important, чтобы повысить его спецификацию выше, чем встроенные стили, применяемые к элементу уже.

http://jsfiddle.net/SombreErmine/FBpLA/12/

Ответ 3

.dataTables_scrollBody
{
 overflow-x:hidden !important;
 overflow-y:auto !important;
}

это работало для меня для всех моих таблиц. Это также была проблема только с firefox и IE, хром справился с ней просто отлично, чтобы начать с.

Ответ 4

Вы можете использовать тег css overflow-x:hidden;, чтобы удалить горизонтальную полосу прокрутки в таблице с идентификатором mytable2.

#mytable2 
{    
  overflow-y:scroll;
  overflow-x:hidden; 
}

Однако, если вы используете table-layout:fixed, это не сработает, большинство браузеров будут рассматривать переполнение в своем естественном поведении, а не просмотр css.

Некоторая информация о table-layout:fixed от Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Пример скрипта: http://jsfiddle.net/FBpLA/9/