4

В данном примере большие таблицы выходят за границы родительского блока, в интернете так и не нашел объяснения. Пока ни обложка, ни 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;
}
<div class="main">
<div class="left">ads</div>
<div class="right">
  <div class="cover-table">
  <table>
    <tr>
      <td><input type="text" /></td>
    </tr><tr>
      <td><input type="text" /></td>
    </tr><tr>
      <td><input type="text" /></td>
    </tr><tr>
      <td><input type="text" /></td>
    </tr><tr>
      <td><input type="text" /></td>
    </tr><tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
  </table>
    </div>
  <div class="cover-table">
  <table class='two'>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
  </table>
    </div>
</div>
</div>

3
  • У вас огромная портянка кода. Попытайтесь свести её к mvce.
    – Kyubey
    13 мая 2016 в 19:22
  • @Discord в данном примере итак ужал структуру html как мог что бы осталось все понимание кода.В любом случае основной код на кодепене на который увы не дают ссылаться без примера кода.
    – Drop
    14 мая 2016 в 6:51
  • У вас совершенно не минимальный код. Если я удалю ячейку, у вас проблема пропадёт? А если две ячейки? Прочитайте всё-таки статью по ссылке.
    – Kyubey
    14 мая 2016 в 10:30

2 ответа 2

1

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

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

10
  • Все правильно, Но я бы хотел обойтись одним css или html в данном вопросе)
    – Drop
    14 мая 2016 в 7:58
  • если без js то вот варианты habrahabr.ru/post/64173 14 мая 2016 в 8:59
  • Надо попробовать, Но все равно разумнее понять почему таблица себя так ведет и исправить)
    – Drop
    14 мая 2016 в 17:35
  • У вас там нет общей таблицы для левой и правой части, а есть 3 или 4 таблицы которые не связаны между собой. Если Вы создадите общую таблицу всего на два столбца и в левый добавите все что в <div class="left-side"> и сделаете соответственную заливку фона, а в правый столбец вставите все что у вас в <div class="main_cover"> то тогда по идее все должно быть норм. При увеличении правого столбца левый также будет увеличиваться. Если хотите использовать блочную верстку через div-вы то проще наверно через js решыть проблему. 14 мая 2016 в 18:18
  • Да и для блока с матрицей А я б добавил "margin-right: 50px;", и матрице В - "margin-bottom: 80px;" 14 мая 2016 в 18:27
0

Все заработало добавив обертку обеим блокам с 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;
}
<div class="main">
<div class="left">ads</div>
<div class="right">
  <div class="cover-table">
  <table>
    <tr>
      <td><input type="text" /></td>
    </tr><tr>
      <td><input type="text" /></td>
    </tr><tr>
      <td><input type="text" /></td>
    </tr><tr>
      <td><input type="text" /></td>
    </tr><tr>
      <td><input type="text" /></td>
    </tr><tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
  </table>
    </div>
  <div class="cover-table">
  <table class='two'>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
    </tr>
  </table>
    </div>
</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.