Do not show "overflow" arrows

Question

I own 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 arrows on the side of the text to be hidden but the mouse scroll still works to go down and up, there is something that does this ?

Answer 1

An alternative that I found (I don’t know if the best one, because I never had to do it) would be using 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 controls the scroll in div son, giving her a negative margin, so that it extends beyond the cell. The overflow: hidden in the cell it is important not to let the arrow appear 'outside' of the td.

See working: https://jsfiddle.net/v1ry5rko/

Answer 2

Look at my example, I don’t know if I got it right but that’s what I got.

Only when you put the mouse in the div the scroll bars appear.

Link: https://jsfiddle.net/z892h4oc/

Answer 3

You can try it here:

::-webkit-scrollbar {
width: 0px;
}

Apply this to your div’s td. Good luck.

Answer 4

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 */
}