Размер корпуса не изменяется при большом столе?

Question

У меня есть панель, и я помещаю bootstrap таблицу внутри нее, но таблица не подходит под нее, когда она большая.

var table = $("<table class='table'>");
table.append($("<thead><tr><th scope='col'>col1</th><th scope='col'>col2</th><th scope='col'>col3</th><th scope='col'>col4</th><th scope='col'>col5</th><th scope='col'>col6</th><th scope='col'>col7</th><th scope='col'>col8</th><th scope='col'>col9</th><th scope='col'>col10</th><th scope='col'>col11</th><th scope='col'>col12</th><th scope='col'>col13</th></tr><thead/>"));
for(var i=0; i<10 ; i++)
{
var row = $('<tbody><tr class="parent_row" >' + '<td>' + "1" + '</td>' + '<td>' + "2" + '</td>' + '<td>' + "3" + '</td>' + '<td>' + "4" + '</td>' + '<td>' + "5" + '</td>' + '<td>' + "6" + '</td>' + '<td>' + "7" + '</td>' + '<td>' + "8" + '</td>' + '<td>' + "9" + '</td>' + '<td>' + "10" + '</td>' + '<td>' + "11" + '</td>' + '<td>' + "12" + '</td>' + '<td>' + "13" + '</td></tr><tbody/>');

table.append(row);

}


$("#table").html(table);
$("#table").show();

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
  <div class="panel-heading">Title Here</div>
  <div id="tablePanelBody" class="panel-body">
    <table id="table">

    </table>
  </div>
</div>

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

Answer 1

Согласно bootstrap документации class="table-responsive" используется для адаптивной таблицы, и вы можете найти адаптивную таблицу внутри panel

var table = $("<table class='table'>");
table.append($("<thead><tr><th scope='col'>col1</th><th scope='col'>col2</th><th scope='col'>col3</th><th scope='col'>col4</th><th scope='col'>col5</th><th scope='col'>col6</th><th scope='col'>col7</th><th scope='col'>col8</th><th scope='col'>col9</th><th scope='col'>col10</th><th scope='col'>col11</th><th scope='col'>col12</th><th scope='col'>col13</th></tr><thead/>"));
for (var i = 0; i < 10; i++) {
  var row = $('<tbody><tr class="parent_row" >' + '<td>' + "1" + '</td>' + '<td>' + "2" + '</td>' + '<td>' + "3" + '</td>' + '<td>' + "4" + '</td>' + '<td>' + "5" + '</td>' + '<td>' + "6" + '</td>' + '<td>' + "7" + '</td>' + '<td>' + "8" + '</td>' + '<td>' + "9" + '</td>' + '<td>' + "10" + '</td>' + '<td>' + "11" + '</td>' + '<td>' + "12" + '</td>' + '<td>' + "13" + '</td></tr><tbody/>');

  table.append(row);

}

$("#table").html(table);
$("#table").show();

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
  <div class="panel-heading">Title Here</div>
  <div id="tablePanelBody" class="panel-body">
    <div class="table-responsive" id="table" style="max-height: 300px;overflow-y: scroll;">

    </div>
  </div>
</div>

По запросу вам нужна вертикальная полоса прокрутки, эта css style="max-height: 300px;overflow-y: scroll;" создаст вертикальную прокрутку, если содержание больше 300px, вы можете изменить ее на ваш ш sh. FYI Вы можете добавить выше css к panel или можете добавить его к table согласно вашему wi sh.

Answer 2

Вы добавляете <table> непосредственно в другой <table>, что является неправильным стандартом кодирования. Добавьте <div class="table-responsive"> и добавьте в него разметку таблицы.

var table = $("<table class='table'>");
table.append($("<thead><tr><th scope='col'>col1</th><th scope='col'>col2</th><th scope='col'>col3</th><th scope='col'>col4</th><th scope='col'>col5</th><th scope='col'>col6</th><th scope='col'>col7</th><th scope='col'>col8</th><th scope='col'>col9</th><th scope='col'>col10</th><th scope='col'>col11</th><th scope='col'>col12</th><th scope='col'>col13</th></tr><thead/>"));
var row = $('<tbody><tr class="parent_row" >' + '<td>' + "1" + '</td>' + '<td>' + "2" + '</td>' + '<td>' + "3" + '</td>' + '<td>' + "4" + '</td>' + '<td>' + "5" + '</td>' + '<td>' + "6" + '</td>' + '<td>' + "7" + '</td>' + '<td>' + "8" + '</td>' + '<td>' + "9" + '</td>' + '<td>' + "10" + '</td>' + '<td>' + "11" + '</td>' + '<td>' + "12" + '</td>' + '<td>' + "13" + '</td></tr><tbody/>');

table.append(row);

$("#table").html(table);
$("#table").show();

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
  <div class="panel-heading">Title Here</div>
  <div id="tablePanelBody" class="panel-body">
    <div class="table-responsive" id="table">

    </div>
  </div>
</div>