Горизонтальная таблица прокрутки в Bootstrap/CSS

Как я могу сделать это так, чтобы таблица внутри контейнера со своей шириной не соответствовала ширине контейнера и вместо этого сохранила ширину таблицы, когда она не находится внутри контейнера. У меня очень широкая таблица, в которой я хочу поместиться внутри контейнера col-md-9, и он отображается плохо, потому что он сжимает таблицу, чтобы соответствовать контейнеру. Я пробовал min-width для таблицы, но он не является гибким, поскольку добавление большего количества столбцов в мою таблицу снова сжимает его. Можно ли сделать ширину таблицы автоматической, если она не соответствует ширине родителя?

<div class="col-md-9" style="overflow-x: auto">
    <table class="table table-bordered" style="width:auto">
    <tbody>
        <tr>
          .... contents
        </tr>
    <tbody>
    </table>
</div>

Ответ 1

Вот одна возможность для вас, если вы используете Bootstrap 3

live view: http://fiddle.jshell.net/panchroma/vPH8N/10/show/

edit view: http://jsfiddle.net/panchroma/vPH8N/

Я использую адресный код таблицы из http://getbootstrap.com/css/#tables-responsive

т

<div class="table-responsive">
<table class="table">
...
</table>
</div>

Ответ 2

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

Он будет иметь прокручиваемую функцию большой колонки с множеством других опций

$(document).ready(function() {
    $('#example').dataTable( {
        "scrollX": true
    } );
} );

для получения дополнительной информации с примером, пожалуйста, ознакомьтесь с этой ссылкой

Ответ 3

@Ciwan. Ты прав. Стол идет на полную ширину (слишком широко). Нехорошее решение. Лучше сделать это:

CSS

.scrollme {
    overflow-y: auto;
}

HTML:

<div class="scrollme">                        
  <table class="table table-responsive"> ...
  </table>
</div>