Доброго времени суток. Столкнулся с такой проблемой:
На станице в таблицу динамически добавляются элементы, если элементов не много, то все ок, но если их количество превышает размеры экрана то таблица наезжает на ниже лежащий контент, не подскажите как это решить?
<body class="bodyTable">
<div class="mainwrapper">
<h1>Предварительный просмотр</h1>
<table border="1">
<tr>
<th>Колонка 1</th>
<th>Колонка 2</th>
<th>Колонка 3</th>
</tr>
<tr>
<td>
Наименование
</td>
<td>
Единица измерения
</td>
<td>
Цена
</td>
</tr>
</div>
<footer>
<div class="copyright">
<p class="copyright-text">© 2017 </p>
</div>
</footer>
</body>
</html>
.mainwrapper {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
/* background-size: 100% auto; */
}
footer {
width: 100%;
background: rgba(255, 255, 255, 0.8);
margin-top: -52px;
height: 50px;
}
.copyright{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/*Table2*/
.bodyTable {
padding: 0;
margin: 0;
height: 100vh;
color: #000000;
background: url("bg2.jpg") #000000;
background-size: 100% auto;
background-repeat: no-repeat;
background-attachment: fixed;
}
table {
max-width: 80%;
border: 1px solid #71A097;
border-spacing: 3px;
border-collapse: collapse;
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 300;
}
td, th {
background: rgba(113,160,151, 0.5);
border: 1px solid #71A097;
}
Простой
