I have a td with overflow .
<td><div><?php echo $objProg->getagen(); ?></div></td>
Css:
td div {
width:100%;
height: 30px;
overflow: auto;
}
With this CSS above it looks like this:
I would like the text-side arrows to be hidden even though the scrolling mouse still works to go down and up, is there anything that will do that?
An alternative I found (I do not know if the best, as I never had to do this) would be to use a negative margin in the div. For example:
table tbody tr td {
border:1px solid #ccc;
overflow: hidden;
}
table tbody tr td div {
max-height: 40px;
overflow-y: scroll;
margin: 0 -20px 0 0;
}
You put overflow: hidden in the parent cell, and control scroll in div child, giving it a negative margin, so that it extends beyond the cell. The% w / w of% in the cell is important not to let the arrow appear 'out' of overflow: hidden .
See it working: link
Look at my example, I do not know if I understood correctly but it was what I got.
Only when you place the mouse on the div do the scroll bars appear.
Link: link
You can try this here:
::-webkit-scrollbar {
width: 0px;
}
Apply this to your div's td. Good luck.
td {
width: 100%;
height: 30px;
overflow: hidden;
}
td div {
height: 100%;
width: 100%;
overflow-y: scroll;
padding-right: 17px; /* Aumente e diminua esse valor para compatibilidade cross-browser */
}