Автоматическая настройка ширины панели в зависимости от содержимого

Question

Я использую bootstrap для управления своим контентом. Однако теперь мне нужна ширина, чтобы можно было использовать горизонтальную прокрутку. Вот как это выглядит (ps: сгенерировано с помощью Razor и foreach, довольно просто :)):

    <div class="panel">
<div class="panel-body">
<div class="row row-fluid">
<div class="col-md-12">
<div class="col-md-2">
  Some content
</div>
<div class="col-md-10">
  <table class="gridtable table-bordered table-spacing">
    <td class="gridrow">
      <th class="gridcol sidebar">Col 1</th>
      <th class="gridcol content">Col 2</th>
      <th class="gridcol content">Col 3</th>
      <th class="gridcol content">Col 4</th>
      <th class="gridcol content">Col 5 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</th>
      <th class="gridcol content">Col 6</th>
      <th class="gridcol content">Col 7</th>
      <th class="gridcol content">Col 8</th>
      <th class="gridcol content">Col 9</th>
      <th class="gridcol content">Col 10</th>
      <th class="gridcol content">Col 11</th>
      <th class="gridcol content">Col 12</th>
    </td>
  </table>
</div>
</div>
<div class="col-md-12">
<div class="col-md-2">
  Some content
</div>
<div class="col-md-10">
  <table class="gridtable table-bordered table-spacing">
    <td class="gridrow">
      <th class="gridcol sidebar">Col 1</th>
      <th class="gridcol content">Col 2</th>
      <th class="gridcol content">Col 3</th>
      <th class="gridcol content">Col 4</th>
      <th class="gridcol content">Col 5</th>
      <th class="gridcol content">Col 6</th>
      <th class="gridcol content">Col 7</th>
      <th class="gridcol content">Col 8</th>
      <th class="gridcol content">Col 9</th>
      <th class="gridcol content">Col 10</th>
      <th class="gridcol content">Col 11</th>
      <th class="gridcol content">Col 12</th>
    </td>
  </table>
</div>
</div>
</div>
</div>
</div>

Вот пример jsfiddle: https://jsfiddle.net/dwhxuvfn/29/.

Моя проблема в том, что содержание в полках 2, 3 и т. Д. Теперь может быть больше ожидаемого. Тогда проблема заключается в том, что мои столбцы ломаются, чтобы перейти на новую строку, что мне не нужно. Если содержимое одного из столбцов слишком велико, я хочу, чтобы все столбцы увеличивались по ширине, и при необходимости добавляю горизонтальную прокрутку.

PS: да, я знаю, что это глупо, поскольку цель состоит в том, чтобы сделать его отзывчивым, но это то, чего хочет клиент ...

У кого-нибудь есть идея, пожалуйста?

Спасибо.

Редактировать: у меня есть несколько таблиц, и мне нужно выровнять все столбцы. Я отредактировал, чтобы было понятно.

Answer 1

Прежде всего, не используйте float для ячеек таблицы.Это обычно нарушает раскладку стола и делает вашу жизнь намного сложнее.Я сделал несколько небольших изменений в вашем jsfiddle, и я думаю, что он отображает таблицу так, как вы хотите: https://jsfiddle.net/efumgprd/

Для столбцов заголовков таблицы рекомендуется использовать white-space:nowrap, чтобы ониУ них будет одинаковая высота, и они заставят таблицу расширяться, не пытаясь обернуть текст внутри.

@media only screen {
    .gridtable {
        width: auto;
        min-width: 100%;
    }
    .gridcol {
        box-sizing: border-box;
        white-space: nowrap;
    }
}