我想保留不同宽度的不同列。我尝试用多种方式更改它，包括更改特定 td/th 的宽度。但宽度属性在我的代码中不起作用。Table div 也包含overflow 属性。但我无法找到为什么无法使用内联样式或使用 nth-child 属性更改宽度。请帮我解决这个问题。 <!DOCTYPE html> <html> <head> <style>.table-div{ overflow-x:auto; overflow-y:auto; margin-bottom: 100px; margin-top: 100px; max-height: 300px;" border: 2px blue;}.lesswidth{ width: 500px;}.fixedwidth{ width: 150px; }table { /*table-layout: fixed;*/ /* width: 100%;*/ /* max-height: 100px;*/ /*border-collapse: collapse;*/ border-spacing: 0; border: 1px solid red; display: block; /*margin-bottom: 100px;*/}th{ /*display: block;*/ border: 1px solid red; position: sticky; top:0; text-align: left; padding: 10px; color:black; width: 200px; background-color: #f2f2f2;}td{ /*display: block;*/ border: 1px solid red; /*text-align: left;*/ padding: 10px; color:black; background-color: #f2f2f2; width: 200px; /*margin: 100px 0px 75px 100px;*/ /*margin-right: 100px;*/}/*td:nth-child(2) { width: 100px !important; }tr:nth-child(even){ background-color: red !important;*/}/*tr:nth-child(even){background-color: #f2f2f2}*/</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"> </head> <body> <div class="container"> <div class="table-div"> <table> <!-- class="tablecolor" --> <tr> <th class="fixedwidth">NUMBER</th> <th>TYPE OF VACCINE</th> <th>RELATED USECASE</th> <th>DEVELOPER/RESEARCHER</th> <th>CURRENT STAGE</th> <th>FUNDING SOURCES</th> <th>CLINICAL TRIALS</th> <th>ANTICIPATED NEXT STEPS</th> <th>PUBLISHED RESULTS</th> <th>SOURCES</th> </tr> </table></div> </div><!-- container --> </body> </html>
- 1 回答
- 0 关注
- 34 浏览
添加回答
举报
0/150
提交
取消