I am struggling to adjust different column widths in my table. Despite trying various approaches, such as changing the width of specific td/th elements and using inline styling or nth-child property, I have been unsuccessful in altering the width. The table div also includes overflow properties which further complicates matters. Can someone please assist me in resolving this issue?
<!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>
<tr >
<td width="500">1</td>
<td >DNA plasmid; INO-4800</td>
<td >Same platform as vaccine candidates for Lassa, Nipah, HIV, Filovirus, HPV, cancer indications, Zika, and Hepatitis B</td>
<td >Inovio Pharmaceuticals/Beijing Advaccine Biotechnology</td>
<td >Pre-clinical</td>
<td >Coalition for Epidemic Preparedness and Gates Foundation</td>
<td >N/A</td>
<td >Started Phase 1 April 2020; initial data expected late summer 2020</td>
<td >N/A</td>
<td >World Health Organization, MarketWatch, BioAegis Therapeutics, INOVIO</td>
<tr>
</table>
</div>
</div><!-- container -->
</body>
</html>