我在表格标签中添加了调整高度和宽度,并将overflow-x
andoverflow-y
属性设置为'auto',但是其中的一些似乎无法正常工作并且表格溢出。我已经尝试过实现这一点,但是在我的代码中却不起作用。如果有任何错误或代码中缺少某些内容,请帮助我解决此问题。
<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>
基于此答案:
tbody
,而是溢出父对象DIV
display: block;
在桌子上使用。/*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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句