Блог

Хорошо, я очень смущен тем, как в моей таблице может быть полоса прокрутки внутри, где я хочу эту строку

далее, чтобы иметь полосу прокрутки вместо обычной полосы прокрутки снаружи, но пока мне не повезло, есть ли какой-нибудь способ, которым я могу это сделать?

Поскольку список таблиц вышел из-за ограничения из-за массивной строки, есть ли способ, при котором после строки 5 он переходит либо на 2-ю страницу навигации, либо на бесконечную полосу прокрутки?

вот код для таблицы html

 <div class="col-md-10">    
    <div class="table-responsive">
        <table id="customer-list" class="table">
            <!-- Loading Spinner Div -->
            <div id="loading-container">
                <p>Fetching all customer data...</p>
                <div id="loading-spinner"></div>
            </div>
            <tbody>
                                            
            </tbody>
        </table>
    </div>
 

Я попробовал использовать плагин datatable, но некоторые из них также не работают

Я думаю, по вашему вопросу я понял, что вы хотите заморозить несколько строк. Вы можете заморозить несколько строк, поместив их в другое tbody и присвоив position: sticky вместе с top:0 .

Смотрите html и css для .freeze-me класса во фрагменте ниже:

 * {
  margin: 0;
  padding: 0;
}
table {
  width: 100%;
  max-height: 200px;
  overflow: auto;
}
tbody{
  width: 100%;
  }
table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
  text-align: left;
}
table, tbody, tr, th, td{
  background: white;
}

tbody.freeze-me{
  top: 0;
  position: sticky;
} 

 <table cellpadding="0" cellspacing="0">
  <tbody class="freeze-me">
    <tr><th>ID</th><th>Name</th><th>Action</th></tr>
    <tr><td>1</td><td>Freeze</td><td>-</td></tr>
    <tr><td>2</td><td>till</td><td>-</td></tr>
    <tr><td>3</td><td>here</td><td>-</td></tr>
  </tbody>
  <tbody>
    <tr><td>4</td><td>scrollable</td><td>-</td></tr>
    <tr><td>5</td><td>scrollable</td><td>-</td></tr>
    <tr><td>6</td><td>scrollable</td><td>-</td></tr>
    <tr><td>7</td><td>scrollable</td><td>-</td></tr>
    <tr><td>8</td><td>scrollable</td><td>-</td></tr>
    <tr><td>9</td><td>scrollable</td><td>-</td></tr>
    <tr><td>10</td><td>scrollable</td><td>-</td></tr>
    <tr><td>11</td><td>scrollable</td><td>-</td></tr>
    <tr><td>12</td><td>scrollable</td><td>-</td></tr>
    <tr><td>13</td><td>scrollable</td><td>-</td></tr>
    <tr><td>14</td><td>scrollable</td><td>-</td></tr>
    <tr><td>15</td><td>scrollable</td><td>-</td></tr>
  </tbody>
</table> 

Вы также можете проверить здесь.