Таблица в html bootstrap не помещается на экране
У меня есть таблица в html bootstrap, таблица выглядит подходящей при загрузке страницы, но после полной загрузки страницы таблица становится прокручиваемой
Мой код:
<div class = "table-responsive">
<table class = "table table-striped table-borderd" id = "orderTable">
<thead>
<tr>
<th>S.No</th>
<th>Order ID</th>
<th>Ordered By</th>
<th>Branch name</th>
<th>Order Date </th>
<th>Order Time </th>
<th>Status</th>
<th>Invoice Status</th>
<th>Actions</th>
</tr>
</thead>
<tfoot>
<tr class = "sn">
<th>S.No</th>
<th>Order ID</th>
<th>Ordered By</th>
<th>Branch name</th>
<th>Order Date </th>
<th>Order Time </th>
<th>Status</th>
<th>Invoice Status</th>
<th>Actions</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</div>Может кто-нибудь, пожалуйста, скажите мне, как сделать его по размеру экрана и избежать прокрутки. заранее спасибо
@Zubair: Мир! У вас есть какой-то другой CSS, применяемый к таблице. Поделитесь своим кодом на codepen. Надо будет проверить вопрос. Я проверил это там, в нет прокрутки.
@George данные поступают из базы данных
@ImranRafiqRather, не могли бы вы открыть чат?
Подожди, брат :) Позвольте мне открыть его и поделиться ссылкой
@ZubairNazerOliyat Нажмите на ссылку выше, чтобы начать чат
@ImranRafiqRather я нажал
@ZubairNazerOliyat попробуйте table-condensed класс вместе с table-responsive
@abdullahQureshee пытался, без изменений
Ответы 1
Как оказалось, основной проблемой в этом случае является ширина элементов <input/>, из-за которой все наши столбцы имели одинаковую ширину.
Я решил это с помощью следующего CSS для Desktop Screen. Для небольших экранов лучше иметь прокрутку, чтобы не потерять данные.
@media (min-width:1320px{
tfoot th input {
width: 90px !important;
}
}
Позже вы можете настроить это для еще большей точки разрыва экрана в соответствии с вашими требованиями.
@Zubair: Если мой ответ помог, вы хотели бы потратить несколько секунд, чтобы проголосовать и принять мой ответ. Это поможет другим разработчикам извлечь из этого пользу. Спасибо :)
Можете ли вы показать весь код, пожалуйста? Только эти коды работают правильно, и таблица не прокручивается на моей машине.