Overflow: hidden
У меня есть таблица, имеющая в себе в качестве ячейки Select.
При низкой ширине экрана, я добавляю нижний scroll к таблице. Но этот scroll перекрывает Select
У кого есть предложения, буду благодарен за ваши ответы
.tables-component {
display: flex;
margin: 10px 0;
}
.tables-component > .foundation-table {
margin-right: 10px;
overflow: auto;
}
.tables-component > .foundation-table > table {
margin-bottom: 10px;
min-width: 1320px;
border-collapse: collapse;
}
.tables-component > .foundation-table > table > thead > tr > th {
padding: 0 20px;
height: 38px;
box-sizing: border-box;
text-align: left;
background-color: #226B4B;
}
.tables-component > .foundation-table > table > thead > tr > th:not(:last-child) {
border-right: 1px solid #FFFFFF;
}
.tables-component > .foundation-table > table > thead > tr > th:first-child {
border-radius: 6px 0 0 0;
}
.tables-component > .foundation-table > table > thead > tr > th:last-child {
border-radius: 0 6px 0 0;
}
.tables-component > .foundation-table > table > tbody > tr > td {
box-sizing: border-box;
font: 13px MontserratMedium;
border: 1px solid #E3E8F1;
color: #3B3F61;
}
.tables-component > .conrols-table > table > thead > tr,
.tables-component > .conrols-table > table > tbody > tr {
height: 38px;
box-sizing: border-box;
}
.tables-component > .conrols-table > table > thead > tr > th > .add-column-in-table {
margin: 0;
padding: 3.5px;
background-color: #226B4B;
border-radius: 100%;
cursor: pointer;
}
@media (min-width: 1440px) {
.tables-component > .foundation-table {
overflow: hidden;
}
}
.scrollbar-component {
overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: thin;
z-index: 1000;
}
.scrollbar-component::-webkit-scrollbar-track {
background-color: #FCFCFE;
border-radius: 12px;
}
.scrollbar-component::-webkit-scrollbar {
width: 7px;
height: 7px;
}
.scrollbar-component::-webkit-scrollbar-thumb {
background-color: #E3E8F1;
border-radius: 12px;
}
/* Select */
.select {
position: relative;
}
.select > .select-container {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 9px 20px;
width: 380px;
box-sizing: border-box;
color: #3B3F61;
font: 13px MontserratSemiBold;
background-color: #FFFFFF;
border: 1px solid #E3E8F1;
border-radius: 6px;
cursor: pointer;
z-index: 1;
user-select: none;
}
.select > .select-container > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.select > .select-container.default {
color: #686B84;
font: 13px MontserratRegular;
}
.select > .select-container.in-table {
height: 52px;
font: 13px MontserratRegular;
color: #3B3F61;
border: none;
}
.select > .select-container.default.in-table {
color: #686B84;
font: 13px MontserratRegular;
}
.select > .select-container.active {
border: 1px solid #226B4B;
z-index: 20;
}
.select > .select-container.in-table.active {
z-index: 20;
border-radius: 0;
outline: 1px solid #226B4B;
border: none;
}
.select > .select-container > div {
display: flex;
justify-content: center;
align-items: center;
}
.select > .select-container > div > .clear {
margin: 0 10px 0 0;
width: 12px;
height: 12px;
}
.select > .select-container > div > .collapse {
margin: 0;
width: 20px;
height: 20px;
transform: rotate(180deg);
fill: #686B84;
transition: .3s;
}
.select > .select-container > div > .collapse.active {
transform: rotate(0deg);
fill: #226B4B;
transition: .3s;
}
.select > .list {
padding: 35px 5px 6px 14px;
position: absolute;
left: 0;
top: 10px;
width: 360px;
max-height: 200px;
background-color: #FFFFFF;
border-radius: 6px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.select > .list.in-table {
padding: 45px 5px 6px 14px;
}
.select > .list > .list-items {
position: relative;
max-height: 200px;
background-color: #FFFFFF;
cursor: default;
z-index: 20;
}
.select > .list > .list-items > p {
margin: 8px 8px 8px 0;
padding: 8px;
font: 13px MontserratSemiBold;
color: #3B3F61;
border-radius: 6px;
transition: .1s;
cursor: pointer;
}
.select > .list > .list-items > p:hover {
background-color: #265243;
color: #FFFFFF;
transition: .1s;
}<div class='tables-component'>
<div class='foundation-table'>
<table>
<thead class='font-text6 white'>
<tr>
<th class='breed'>Порода</th>
<th class='height-rank'>Разряд высот</th>
<th class='thickness-step'>Ступень толщины (диаметр)</th>
<th class='business-trunks'>Кол. деловых стволов</th>
<th class='wood-trunks'>Кол. дровяных стволов</th>
<th class='trunks'>Общее количество стволов</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="select font-text2 blue-light">
<div class="select-container active default in-table">
<span title="Выберите значение">Выберите значение</span>
<div><svg class="collapse active" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 48 48" version="1" enable-background="new 0 0 48 48"><polygon points="5,30.9 8.1,34 24,18.1 39.9,34 43,30.9 24,12"></polygon></svg>
</div>
</div>
<div class="list in-table">
<div class="list-items scrollbar-component">
<p>Договор аренды</p>
<p>Лесная декларация</p>
<p>Лесосека</p>
</div>
</div>
</td>
<td>
<input class='in-table' type='text' placeholder='Введите значение' />
</td>
<td>
<input class='in-table' type='text' placeholder='Введите значение' />
</td>
<td>
<input class='in-table' type='text' placeholder='Введите значение' />
</td>
<td>
<input class='in-table' type='text' placeholder='Введите значение' />
</td>
<td>
<input class='in-table' type='text' placeholder='Введите значение' />
</td>
</tr>
<tr>
<td>
<select name="g" id="2">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</td>
<td>
<input class='in-table' type='text' placeholder='Введите значение' />
</td>
<td>
<input class='in-table' type='text' placeholder='Введите значение' />
</td>
<td>
<input class='in-table' type='text' placeholder='Введите значение' />
</td>
<td>
<input class='in-table' type='text' placeholder='Введите значение' />
</td>
<td>
<input class='in-table' type='text' placeholder='Введите значение' />
</td>
</tr>
</tbody>
</table>
</div>
</div>