таблица выходит за границы родителя

#html #css

В данном примере большие таблицы выходят за границы родительского блока, в интернете
так и не нашел объяснения. Пока ни обложка, ни table-layout:fixed; ни использование
inline block или float - не помогают. На примере кода ниже видно что красный блок это
левый блок, правый блок это блок с inputs зеленого цвета и обложка синего цвета. Хотелось
бы понять причину и решить без использования js.
Если здесь не удобно смотреть то вот ссылки проект и codepen



html,body{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.main{
  height: 100%;
  width: 100%;
  background: blue;
}
.left, .right{
  display: inline-block;
  vertical-align: top;

}
.left{
/* float: left; */
 height: 100%;
 width: 25%;
  background: red;
}
.right{
/*   float: left; */
     background: green;
}
.cover-table{
  display: inline-block;
  vertical-align: top;
}
table{
table-layout: fixed;
}

ads

  

  
    
  

  
    





    

Ответы

Ответ 1

Если я все правильно понял то добавьте этот код в style.js



$(document).on('click', '.btn-style', function(){ // функция запускается при нажатии
на кнопку добавить/удалить
  var hb = $('.main_cover').height(); // получаем высоту правого блока
  $('.left-side').height(hb+80); // левому блоку задаем высоту правого плюс 80 пикселей
так как использовались псевдоелементы для таблиц
}); // конец функции


Ответ 2

Все заработало добавив обертку обеим блокам с display:table;



html,body{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.main{
  height: 100%;
  width: 100%;
  background: blue;
  display:table;
}
.left, .right{
  display: inline-block;
  vertical-align: top;

}
.left{
/* float: left; */
 height: 100%;
 width: 25%;
  background: red;
}
.right{
/*   float: left; */
     background: green;
}
.cover-table{
  display: inline-block;
  vertical-align: top;
}
table{
table-layout: fixed;
}

ads