我无法更改 html 代码中表格中特定单元格/列的宽度
我想保留不同宽度的不同列。我尝试用多种方式更改它，包括更改特定 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>
慕姐82654341回答
-
慕田峪9158850
正确的方法是：<td style="min-width: 500px;">1</td>
随时随地看视频慕课网APP
相关分类
Html5