HTML Bootstrap таблица с фиксированным заголовком - PullRequest
Новая
       15

HTML Bootstrap таблица с фиксированным заголовком

0 голосов
/ 14 мая 2018

У меня есть одна таблица начальной загрузки HTML, которая имеет более 15 столбцов, поэтому я включил автоматическое переполнение, и у него вертикальная и горизонтальная прокрутка. Я пытаюсь исправить часть заголовка, но я не могу сделать это только из-за ширины таблицы более 100%, и я не могу указать ширину столбцов более 100%. Кто-нибудь может помочь решить эту проблему с помощью чистого HTML и CSS, я не хочу использовать любую библиотеку или код скрипта

Примечание. Я отображаю эту таблицу в Angular5

.

1 Ответ

0 голосов
/ 14 мая 2018

HTML 

<table class="table table-striped">
<thead>
<tr>
    <th>Make</th>
    <th>Model</th>
    <th>Color</th>
    <th>Year</th>
</tr>
</thead>
<tbody>
<tr>
    <td class="filterable-cell">Ford</td>
    <td class="filterable-cell">Escort</td>
    <td class="filterable-cell">Blue</td>
    <td class="filterable-cell">2000</td>
</tr>
<tr>
    <td class="filterable-cell">Ford</td>
    <td class="filterable-cell">Escort</td>
    <td class="filterable-cell">Blue</td>
    <td class="filterable-cell">2000</td>
</tr>
        <tr>
    <td class="filterable-cell">Ford</td>
    <td class="filterable-cell">Escort</td>
    <td class="filterable-cell">Blue</td>
    <td class="filterable-cell">2000</td>
</tr>
 <tr>
    <td class="filterable-cell">Ford</td>
    <td class="filterable-cell">Escort</td>
    <td class="filterable-cell">Blue</td>
    <td class="filterable-cell">2000</td>
</tr>
</tbody>

CSS 

table {
   width: 100%;
}

thead, tbody, tr, td, th { display: block; }

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;

    /*text-align: left;*/
}

tbody {
    height: 120px;
    overflow-y: auto;
}

thead {
    /* fallback */
}


tbody td, thead th {
    width: 19.2%;
    float: left;
}

Вот пример, который вам поможет Пример

...