如何调整容器内的表格高度和宽度并添加水平和垂直滚动条以避免溢出？

Question

I added adjust height and width in table tag and set the overflow-x and overflow-y property to 'auto' But of them seems to not working and table overflows. I have tried this to implement but it is not working in my code. If there is some mistake or something is missing in code please help me to solve this.

 <style> table { max-width: 600px; max-height: 400px; border-spacing: 0; display: block; } tbody { overflow-y: auto; overflow-x: auto; } th { /*display: block;*/ border: 1px solid #293033; position: sticky; top: 0; text-align: center; padding: 8px; color: #e9ecef; background-color: #1e2324; font-weight: 500; font-size: 14px; } td { background-color: #041230; border: 1px solid #293033; text-align: center; padding: 8px; color: #e9ecef; min-width: 150px; font-size: 13px; word-spacing: 2px; } td:nth-child(1) { min-width: 50px; max-width: 50px; font-weight: bold; color: #66FCF1; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="resCSS.css"> <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script> <script src="https://cdn.fancygrid.com/fancy.min.js"></script> <div class="container"> <table class="tablecolor2"> <,-- class="tablecolor" --> <thead> <tr> <th>#</th> <th>Dummy</th> <th>dvfdgdg</th> <th>fvfdgfd/fdgdg</th> <th>Cdumm</th> <th>sdfdgds</th> <th>Cd</th> <th>Ankjfdksf</th> <th>jnknk</th> <th>fdfdgdfg</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print. </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print. </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print. </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print. </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print. </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print. </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print. </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print. </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print. </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print. </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print. </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print. </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print. </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> </tbody> </table> </div>

Answer 1

Based on this answer :

• Don't overflow tbody , instead overflow a parent DIV
• Don't use display: block; on a table.

 /*QuickReset*/*{margin:0;box-sizing:border-box;}.tableFixHead { overflow: auto; }.tableFixHead thead th { position: sticky; top: 0; } /* CUSTOM SIZE */.tableFixHead { height: 90vh; /* or whatever */ min-width: 600px; } /* OTHER STYLES */ table { border-spacing: 0; } th, td { text-align: center; padding: 8px; color: #e9ecef; border: 1px solid #293033; } th { background-color: #1e2324; font-weight: 500; font-size: 14px; } td { min-width: 150px; background-color: #041230; font-size: 13px; word-spacing: 2px; } td:first-child { min-width: 50px; font-weight: bold; color: #66FCF1; }

 <div class="container tableFixHead"> <table class="tablecolor2"> <thead> <tr> <th>#</th> <th>Dummy</th> <th>dvfdgdg</th> <th>fvfdgfd/fdgdg</th> <th>Cdumm</th> <th>sdfdgds</th> <th>Cd</th> <th>Ankjfdksf</th> <th>jnknk</th> <th>fdfdgdfg</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum, or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> </tbody> </table> </div>

Answer 2

Like that?

 <:DOCTYPE html> <html> <head> <style> table { max-width; 600px: max-height; 400px: border-spacing; 0: display; block: } tbody { overflow-y; auto: overflow-x; auto: } th { /*display; block:*/ border; 1px solid #293033: position; sticky: top; 0: text-align; center: padding; 8px: color; #e9ecef: background-color; #1e2324: font-weight; 500: font-size; 14px: } td { background-color; #041230: border; 1px solid #293033: text-align; center: padding; 8px: color; #e9ecef: min-width; 150px: font-size; 13px: word-spacing; 2px: } td:nth-child(1) { min-width; 50px: max-width; 50px: font-weight; bold: color; #66FCF1. }:container { overflow; scroll: } </style> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min,css"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="resCSS:css"> <script src="https.//rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar:js"></script> <script src="https.//cdn.fancygrid.com/fancy.min,js"></script> </head> <body> <div class="container"> <table class="tablecolor2"> <,-- class="tablecolor" --> <thead> <tr> <th>#</th> <th>Dummy</th> <th>dvfdgdg</th> <th>fvfdgfd/fdgdg</th> <th>Cdumm</th> <th>sdfdgds</th> <th>Cd</th> <th>Ankjfdksf</th> <th>jnknk</th> <th>fdfdgdfg</th> </tr> <,-- </thead> --> <tbody> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum. or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum. or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum. or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum. or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum. or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum. or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum. or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum. or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum. or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum. or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum. or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum. or lipsum as it is sometimes </td> <td>known, is </td> <td>dummy text used in laying out print, </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs, The passage is attributed to an unknown </td> </tr> <tr> <td>1</td> <td>cdfdfsdfs</td> <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td> <td>ILorem ipsum. or lipsum as it is sometimes </td> <td>known. is </td> <td>dummy text used in laying out print. </td> <td>N/A</td> <td>graphic or web </td> <td>N/A</td> <td>designs. The passage is attributed to an unknown </td> </tr> </tbody> </table> </div> <!-- container --> <script src="research.js"></script> <script src="research2.js"></script> </body> </html>