Вопросы Теги

Заставить таблицу HTML превышать ширину div: CSS

Описание: Ошибка приложения на сервере. Текущие настройки пользовательских ошибок для этого приложения не позволяют удаленно просматривать детали ошибки приложения (по соображениям безопасности). Однако он может просматриваться браузерами, запущенными на локальном сервере.

Подробности. Чтобы включить подробные сведения об этом конкретном сообщении об ошибке для просмотра на удаленных компьютерах, создайте тег в «веб-сети». config ", расположенный в корневом каталоге текущего веб-приложения. Затем этот тег должен иметь свой атрибут «mode» равным «Off».

2
задан qkflies 17 March 2019 в 20:13
поделиться

1 ответ

Обычно я использую оболочку класса / идентификатора и на основе максимальной ширины оболочки назначаю ширину таблицы: 100%, которая затем создает эффект полосы прокрутки со свойством overflow: scroll hidden, которое, как я думаю, вы находясь в поиске? Если вы хотите вертикальную прокрутку.

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

Просто назначьте таблицу CSS с шириной: 100% и используйте @media с оберткой таблицы в зависимости от размера экрана. Это будет отлично работать и для адаптации колонки. Вам просто нужно будет соответственно отрегулировать.

Назначая встроенную ширину родительского div, вы создаете препятствие для ваших возможностей реагирования css, поскольку вы не можете переопределить встроенные стили. Я бы изменил этот подход. 

#myTable {
  border-collapse: collapse;
  /* Collapse borders */
  border: 1px solid #ddd;
  /* Add a grey border */
  font-size: 18px;
  /* Increase font-size */
  width: 100%;
  overflow: scroll hidden;
}

 .tbl_wrapper{max-width: 540px;}

@media screen and (max-width: 768px){
   <!--Do some edits based on screen size //-->
.tbl_wrapper{max-width: 540px;}
}

@media screen and (max-width: 1040px){
   <!--Do some edits based on screen size //-->
.tbl_wrapper{max-width: 640px;}
}


<div class="tbl_wrapper" style="background-color: #f0f0f0; padding: 5px;">
     <table id="myTable" cellspacing="0" cellpadding="2" border="1">
     </table>
</div>
0
ответ дан yardpenalty 17 March 2019 в 20:13
поделиться