0

I am trying to get scroll bars appear in a table only when needed, while at the same time displaying colors when hovering over row and column. Highlighting row and column when hover over the table is working, but the scroll bar is appearing all the time.

How can I make the scroll bar appear only when needed?

#table_grid {
  border-spacing: 0;
  border-collapse: collapse;
  /*overflow: hidden;*/
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
  background: #fff;
  margin: 0px;
  text-align: left;
  max-height: 100%;
  max-width: auto;
  display: block;
  overflow: auto;
}

#table_grid td,
th {
  color: #669;
  padding: 9px 8px 4px 8px;
  font-size: 13px;
  position: relative;
}

#table_grid tr:hover {
  background-color: rgba(220, 220, 220, 0.5);
}

#table_grid td:hover::after,
th:hover::after {
  background-color: rgba(211, 211, 211, 0.2);
  content: '\00a0';
  height: 10000px;
  left: 0;
  position: absolute;
  top: -5000px;
  width: 100%;
  pointer-events: none;
}
<table id="table_grid">
  <tr>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
  </tr>
  <tr>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
  </tr>
  <tr>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
  </tr>
  <tr>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
  </tr>
  <tr>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
  </tr>
  <tr>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
    <td>testing</td>
  </tr>
</table>
cloned
  • 6,346
  • 4
  • 26
  • 38
Gino
  • 189
  • 2
  • 10
  • Check this similar ['Hide table scrollbar'](https://stackoverflow.com/questions/29606799/hide-table-scrollbar#:~:text=Use%20overflow%3A%20hidden%3B%20to%20hide,Both%20remove%20the%20scrollbar.) case. It might help. – rensothearin Nov 11 '20 at 13:49
  • Thanks. If I use hidden, I never see a scroll bar. If I use visible, scroll bar appears when needed but now when I hover over the table, the highlights of the row & column are going from top to bottom of the page – Gino Nov 11 '20 at 13:53
  • I managed to get this working by assigning max-height:100%; max-width:auto; display: block; overflow: auto; to a div and wrapping the table in that div – Gino Nov 11 '20 at 14:46
  • Well done, great job! – rensothearin Nov 11 '20 at 14:47

1 Answers1

0

Try using overflow-x:auto; overflow-y:hidden;

making overflow auto only allows scrollbar to appear when the content goes beyond the space provided.

Supriya M
  • 14
  • 9