<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="les.css">
<body>
<div class="les">
<table class="table1">
<thead class="thead1">
<tr class="tr1">
<td class="td1" colspan="5">select</td>
</tr>
<tr class="tr2">
<td class="td1">select</td>
<td class="td1">select</td>
<td class="td1">select</td>
<td class="td1">select</td>
<td class="td1">select</td>
</tr>
</thead>
<tbody class="tbody1">
<tr class="tr">
<td class="td">select</td>
<td class="td">select</td>
<td class="td">select</td>
<td class="td">select</td>
<td class="td">select</td>
</tr>
<tr class="tr">
<td class="td">select</td>
<td class="td">select</td>
<td class="td">select</td>
<td class="td">select</td>
<td class="td">select</td>
</tr>
</tbody>
<tfoot class="tfoot1">
<tr class="tr3">
<td class="td3">
<input type="submit" value="Submit" class="button">
</td>
</tr>
</tfoot>
</table>
</div>
<input type="submit" value="Submit" class="button">
</body>
</html>
.les{
border: 3px solid black;
height: 300px;
width: 450px;
}
.table1{
border-collapse:collapse;
height: 300px;
width: 450px;
}
.thead1 {
display: block;
position: sticky;
}
.tr1{
height: 25px;
text-align: center;
}
.td1{
width: 90px;
padding-left: 5px;
text-align: left;
border: 3px solid #808080;
}
.tr2{
height: 40px;
}
.tbody1{
display: block;
overflow-y: scroll;
}
.tfoot1{
display: block;
position: sticky;
}
.tr3{
text-align: center;
}
.td3{
width: 450px;
text-align: center;
border: 3px solid #808080;
}
.button{
width: 60px;
height: 20px;
font-size: 12px;
text-decoration: underline;
border-radius: 4px;
color:skyblue
}
.tr{
text-align: center;
border: 3px solid red;
}
.td{
width: 90px;
text-align: center;
border: 3px solid red;
}
