Споткнулся о следующее поведение параметра overflow
:
Если значение overflow-x
любое кроме initial
, inherit
, или unset
то значение overflow-y
уже не будет прежним, а поменяться на auto
.
Это мне очень сильно жизнь подпортило, если кто знает, что можно тут придумать говорите не молчите :)
* {
box-sizing: border-box;
}
#one td, #two td {
max-width: 100px;
height: 30px;
padding: 17px 10px;
border: solid 1px black;
position: relative;
background: #fff;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
overflow-y: hidden;
}
#table td:hover {
overflow-x: overlay;
text-overflow: initial;
}
td::after {
content: "";
width: 99px;
height: 10px;
background: red;
position: absolute;
left: -1px;
bottom: -7px;
cursor: n-resize;
z-index: 999;
}
#one td {
z-index: 2;
}
#two td {
z-index: 1;
}
<table id="table">
<tr id="one">
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, eligendi?</td>
</tr>
<tr id="two">
<td>two</td>
</tr>
</table>
Красная полоска подразумевается для resize'a ячеек и нужно разкомментировать overflow
чтобы понять суть проблемы.