我无法在我的 html 代码中更改表格中特定单元格/列的宽度答案

【问题标题】：I can't change the width of specific cell / column in table in my html code我无法在我的 html 代码中更改表格中特定单元格/列的宽度
【发布时间】：2020-08-01 20:54:57
【问题描述】：

我想保留不同宽度的不同列。我试图用多种方式改变它，包括改变特定 td/th 的宽度。但是宽度属性在我的代码中不起作用。表 div 也包含溢出属性。但我无法找到为什么我不能使用内联样式或使用 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>


   <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>

【问题讨论】：

标签： html css html-table bootstrap-4

【解决方案1】：

正确的做法是：

<td style="min-width: 500px;">1</td>

【讨论】：