HTML表格指定列/单元格宽度无法生效问题求助

我看了你的代码，列宽设置不生效主要有几个关键原因，咱们一步步来修复：

1. 移除表格的display: block属性 #

你给<table>加了display: block，这会让表格失去原生的表格布局特性，列宽自然没法按预期生效。把这个属性删掉就行。

2. 开启table-layout: fixed模式 #

这个属性是让表格优先遵循你设置的列宽，而不是被单元格内容撑开。给table加上这个样式，是固定列宽的核心。

3. 调整th/td的样式，避免破坏表格布局 #

不要给th/td加display: block，这会把单元格变成块级元素，彻底打乱表格结构。另外，你可以通过类或者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 solid blue; /* 你之前的border写法缺少solid属性，已补上 */
}
.fixedwidth {
  width: 150px;
}
.lesswidth {
  width: 500px;
}
table {
  table-layout: fixed; /* 开启固定布局，优先遵循自定义列宽 */
  width: 100%; /* 让表格占满容器宽度，配合fixed布局生效 */
  border-spacing: 0;
  border: 1px solid red;
  /* 移除display:block，恢复表格原生布局 */
}
th{
  border: 1px solid red;
  position: sticky;
  top:0;
  text-align: left;
  padding: 10px;
  color:black;
  background-color: #f2f2f2;
  /* 移除display:block，保持单元格原生特性 */
}
td{
  border: 1px solid red;
  padding: 10px;
  color:black;
  background-color: #f2f2f2;
  /* 移除display:block，保持单元格原生特性 */
  word-wrap: break-word; /* 内容过长时自动换行，避免撑破列宽 */
}
/* 给指定列设置自定义宽度的示例 */
td:nth-child(2), th:nth-child(2) {
  width: 200px !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>
      <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>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>

额外说明 #

• word-wrap: break-word是为了防止单元格里的长内容撑破你设置的列宽，让内容自动换行。
• 表格的sticky表头在overflow容器里依然可以正常工作，不会受列宽设置影响。

内容的提问来源于stack exchange，提问作者Ayes