All geek questions in one place

HTML / CSS: how to create a scrollbar for tr

Can someone tell me how to create a scroll bar for an internal table? The internal table does not appear in the container. I painted the background of the yellow container. The table itself is blue.

I want to see the scroll bar in the table.

Source: http://nopaste.info/e51385254e.html

and here:

<html> <body> <div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;"> <table style="background-color: blue"> <tr> <th>column1</th> <th>column2</th> <th>column3</th> <th>column4</th> </tr> <tr> <td>columnvalue1</td> <td>columnvalue2</td> <td>columnvalue3</td> <td>columnvalue4</td> </tr> <tr> <td colspan="4"> <table> <tr> <th>SubColumn1</th> <th>SubColumn2</th> <th>SubColumn3</th> <th>SubColumn4</th> <th>SubColumn5</th> <th>SubColumn6</th> <th>SubColumn7</th> <th>SubColumn8</th> <th>SubColumn9</th> <th>SubColumn10</th> <th>SubColumn11</th> <th>SubColumn12</th> <th>SubColumn13</th> <th>SubColumn14</th> </tr> <tr> <td>subvalue1</td> <td>subvalue2</td> <td>subvalue3</td> <td>subvalue4</td> <td>subvalue5</td> <td>subvalue6</td> <td>subvalue7</td> <td>subvalue8</td> <td>subvalue9</td> <td>subvalue10</td> <td>subvalue11</td> <td>subvalue12</td> <td>subvalue13</td> <td>subvalue14</td> </tr> </table> </td> </tr> </table> </div> <body> </html>
+4
source share
3 answers

wrap your inner table with a div. Make this scrollable div by assigning it width and height styles with overflow as automatically or scroll.

 <div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;"> <table style="background-color: blue"> <tr> <th>column1</th> <th>column2</th> <th>column3</th> <th>column4</th> </tr> <tr> <td>columnvalue1</td> <td>columnvalue2</td> <td>columnvalue3</td> <td>columnvalue4</td> </tr> <tr> <td colspan="4"> <div style="max-height: 100px; max-width: 100px; width: 100px; overflow: auto;"> <table> <tr> <th>SubColumn1</th> <th>SubColumn2</th> <th>SubColumn3</th> <th>SubColumn4</th> <th>SubColumn5</th> <th>SubColumn6</th> <th>SubColumn7</th> <th>SubColumn8</th> <th>SubColumn9</th> <th>SubColumn10</th> <th>SubColumn11</th> <th>SubColumn12</th> <th>SubColumn13</th> <th>SubColumn14</th> </tr> <tr> <td>subvalue1</td> <td>subvalue2</td> <td>subvalue3</td> <td>subvalue4</td> <td>subvalue5</td> <td>subvalue6</td> <td>subvalue7</td> <td>subvalue8</td> <td>subvalue9</td> <td>subvalue10</td> <td>subvalue11</td> <td>subvalue12</td> <td>subvalue13</td> <td>subvalue14</td> </tr> </table> </div> </td> </tr> </table>

which should work

+5
source

Try this on the div part

 <div style="overflow:scroll width:1000px;margin-left:auto;margin-right:auto; background-color: yellow; height: 1000px;">

In case of failure, try overflow: scroll through the style of the table.

+3
source

Wrap the table with a div that will have the same width with your container and overflow:scroll

Example: http://jsbin.com/uheha4

+1
source

Source: https://habr.com/ru/post/1338696/

More articles:


All Articles