Bootstrap отзывчивый стол внутри дисплея: стол

У меня есть Bootstrap отзыв table, который находится в пределах div с CSSdisplay:table. Это, по-видимому, препятствует тому, чтобы таблица стала отзывчивой. Как заставить таблицу реагировать без изменения внешнего CSS?Bootstrap отзывчивый стол внутри дисплея: стол

JsFiddle

Для справки display:table используется для создания «липкий колонтитул»: How to create a sticky footer that plays well with Bootstrap 3

источник

2016-09-29 user5633550

есть дисплей: таблица обязательна иметь в коде? –

Да, как уже упоминалось, его использование липким нижним колонтитулом и не то, что я могу с легкостью изменить – user5633550

Это отзывчиво. Но ваши предметы должны быть длинными, чтобы он не показывал остальную таблицу. – SAM

Если вы не хотите, чтобы изменить текущую CSS, вы должны сделать свой текст отзывчивым, чтобы исправить эту проблему ,
установить font size и вместо px использования vm, vw, vh или vmin Эти суффиксы сделать свой текст responseive.

источник

2016-09-29 05:16:30 SAM

Настройка 'font-size: 1vmin' on таблица работает, но делает текст настолько маленьким, что он не читается, что на самом деле не является отличным решением. – user5633550

Использовать 'font-size: 2vw' – SAM

Использование 2vw приводит к тому, что таблица слишком большая для области просмотра и получает всю горизонтальную прокрутку страницы – user5633550

попробовать это, может быть, это поможет вам

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style> 
 
.content-container { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
} 
 
.table-responsive { 
 
    border: 1px solid #ddd; 
 
    display: -moz-stack; 
 
    margin-bottom: 15px; 
 
    overflow-y: hidden; 
 
    width: 100%; 
 
} 
 

 

 
</style> 
 
</head> 
 
<body> 
 

 
<div class="content-container"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
      <h3 class="panel-title">Bookings</h3></div> 
 
      <div class="bookings_list"> 
 
      <div class="row"> 
 
       <div class="col-xs-12"> 
 
       <div class="table-responsive"> 
 
        <table class="table table-striped table-hover"> 
 
        <thead> 
 
         <tr> 
 
         <th>ID</th> 
 
         <th>Customer</th> 
 
         <th>Provider</th> 
 
         <th>Agent</th> 
 
         <th>Service</th> 
 
         <th>Status</th> 
 
         <th>Status</th> 
 
         <th>Status</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr class="clickable" action="push" href="/bookings/UY6001"> 
 
         <td>123</td> 
 
         <td>John Smith</td> 
 
         <td>ACME Corp</td> 
 
         <td>Mike</td> 
 
         <td>123456</td> 
 
         <td>Active</td> 
 
         <td>Active</td> 
 
         <td>Active</td> 
 
         </tr> 
 
         <tr class="clickable" action="push" href="/bookings/UY6000"> 
 
         <td>123</td> 
 
         <td>John Smith</td> 
 
         <td>ACME Corp</td> 
 
         <td>Mike</td> 
 
         <td>123456</td> 
 
         <td>Active</td> 
 
         <td>Active</td> 
 
         <td>Active</td> 
 
         </tr> 
 
        </tbody> 
 
        </table> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

источник

2016-09-29 05:17:19

if вы не можете увидеть отзывчивую таблицу здесь, просто скопируйте мой код и вставьте в блокнот, затем попробуйте –

Это не работает – user5633550

Установите ваши container «ы ширины на основе видового экрана, а не процентное значение:

@media (max-width: 768px) { 
    .container { 
    width: 100vw; 
    } 
}

Updated Fiddle

С container является довольно распространенным классом в бутстрапе, вы можете подумать о добавлении пользовательского класса к определенному элементу, к которому вы хотите добавить этот стиль.

источник

2016-09-29 05:28:47

Интересное решение, но я все еще, кажется, получаю немного цельной горизонтальной прокрутки страницы, используя 100vw, и что-то меньшее, что создает небольшой запас – user5633550

Bootstrap отзывчивый стол внутри дисплея: стол

ответ

Смежные вопросы