Menu
Can someone tell me how to create a scrollbar for the inner table? The inner table is not displayed within the container. I colored the background of the container yellow. The table itself is blue.
I wanna see a scroll bar within 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>
464
wrap your inner table with a div. Make that div scrollable by giving it the width and height styles with overflow as auto 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>
that should work
200
Try this on div part
<div style="overflow:scroll width:1000px;margin-left:auto;margin-right:auto;
background-color: yellow; height: 1000px;">
If fail, try overflow:scroll on the style of the table.
36
Wrap your table with a div, which will have the same width with your container and overflow:scroll
Example: http://jsbin.com/uheha4
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
