html表格的最大和最小宽度在CSS中不起作用

Question

我已经在 CSS 中定义了最小宽度和最大宽度，但没有任何反应。我也试过这样定义，<td style="min-width: 30px; max-width: 50px;> 还是什么都没有。那么如何使其适用于最大和最小宽度？我希望数据库中的长文本在达到单元格的最大大小时自动下降到下一行。

table,tr,td,th {
  border: 1px solid black;
  white-space: normal;
  
}

table tr td:nth-child(1) {
    background-color: red;
}

table {
  table-layout: fixed;
  width: 140%;
  margin-left: 20px;
}

table td {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100px;
  min-width: 50px;
}

<div name="tables">
  <table>
    <tr>
      <th>No Seq</th>
      <th>Department</th>
      <th>Person in Charge</th>
      <th>Project Title</th>
      <th>Objectives</th>
      <th>How To Do</th>
      <th>Activities</th>
      <th>Project Started</th>
      <th>Project Completed</th>
      <th>Target Cost Saving(RM)/Year</th>
      <th>Cost Saving After Justification</th>
      <th>Cost Saving Monthly</th>
    </tr>
    
   <tr id="row1">
      <td> <?php echo $id;?></td>
      <td id="department_row1"> <?php echo $department;?></td>
      <td id="pic_row1"> <?php echo $person_in_charge;?></td>
      <td id="protitle_row1"> <?php echo $project_title;?></td>
      <td id="objective_row1"> <?php echo $objective;?></td>
      <td id="howtodo_row1"><?php echo $how_to_do;?></td>
      <td id="activities_row1"> <?php echo $activities;?></td>
      <td id="prostart_row1"> <?php echo $project_started;?></td>
      <td id="procompl_row1"> <?php echo $project_completed;?></td>
      <td id="targetcost_row1"> <?php echo $target_cost_saving;?></td>
      <td id="costafter_row1"> <?php echo $costsaving_afterjustification;?></td>
      <td id="costmonthly_row1"> <?php echo $costsaving_monthly;?></td>
      </tr>
      </table>
      </div>

Answer 1

如果你插入 word-break : break-all;在表格中，当单词超过 div 宽度时，这将打破单词。

table,tr,td,th {
  border: 1px solid black;
  white-space: normal;      
}

table tr td:nth-child(1) {
  background-color: red;
}

table {
  table-layout: fixed;
  width: 140%;
  margin-left: 20px;
  word-break : break-all;
}

table td {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100px;
  min-width: 50px;
}

<div name="tables">
  <table>
    <tr>
      <th>No Seq</th>
      <th>Department</th>
      <th>Person in Charge</th>
      <th>Project Title</th>
      <th>Objectives</th>
      <th>How To Do</th>
      <th>Activities</th>
      <th>Project Started</th>
      <th>Project Completed</th>
      <th>Target Cost Saving(RM)/Year</th>
      <th>Cost Saving After Justification</th>
      <th>Cost Saving Monthly</th>
    </tr>
    
   <tr id="row1">
      <td> <?php echo $id;?></td>
      <td id="department_row1"> <?php echo $department;?></td>
      <td id="pic_row1"> <?php echo $person_in_charge;?></td>
      <td id="protitle_row1"> <?php echo $project_title;?></td>
      <td id="objective_row1"> <?php echo $objective;?></td>
      <td id="howtodo_row1"><?php echo $how_to_do;?></td>
      <td id="activities_row1"> <?php echo $activities;?></td>
      <td id="prostart_row1"> <?php echo $project_started;?></td>
      <td id="procompl_row1"> <?php echo $project_completed;?></td>
      <td id="targetcost_row1"> <?php echo $target_cost_saving;?></td>
      <td id="costafter_row1"> <?php echo $costsaving_afterjustification;?></td>
      <td id="costmonthly_row1"> <?php echo $costsaving_monthly;?></td>
    </tr>
  </table>
</div>

Answer 2

表格使用宽度和高度属性作为粗略提示而不是绝对规则。 如果您真的希望表格单元格中的内容不超过一定宽度，唯一万无一失的方法就是添加更多标记。在单元格中放置一个 div，将 max-width 等属性分配给。

您的特定示例中的另一个问题是table-layout:fixed 与第一行完全没有大小的组合。这意味着浏览器将仅根据第一行为列分配宽度，并将完全忽略稍后调整大小的任何尝试。我已经注释掉了 table-layout 属性。

table, tr, td, th {
  border: 1px solid black;
  white-space: normal;
}

table tr td:nth-child(1) {
  background-color: red;
}

table {
  /*table-layout: fixed;
  width: 140%;*/
  margin-left: 20px;
}

th > div, td > div {
  max-width: 100px;
  min-width: 50px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

<div name="tables">
  <table>
    <tr>
      <th><div>No Seq</div></th>
      <th><div>Department</div></th>
      <th><div>Person in Charge</div></th>
      <th><div>Project Title</div></th>
      <th><div>Objectives</div></th>
      <th><div>How To Do</div></th>
      <th><div>Activities</div></th>
      <th><div>Project Started</div></th>
      <th><div>Project Completed</div></th>
      <th><div>Target Cost Saving(RM)/Year</div></th>
      <th><div>Cost Saving After Justification</div></th>
      <th><div>Cost Saving Monthly</div></th>
    </tr>

    <tr id="row1">
      <td><div> 1</div></td>
      <td id="department_row1"><div> some text </div></td>
      <td id="pic_row1"><div> some rather long text </div></td>
      <td id="protitle_row1"><div> text </div></td>
      <td id="objective_row1"><div> text </div></td>
      <td id="howtodo_row1"><div> text </div></td>
      <td id="activities_row1"><div> text </div></td>
      <td id="prostart_row1"><div> text </div></td>
      <td id="procompl_row1"><div> text </div></td>
      <td id="targetcost_row1"><div> text </div></td>
      <td id="costafter_row1"><div> text </div></td>
      <td id="costmonthly_row1"><div> text </div></td>
    </tr>
  </table>
</div>

Answer 3

在 min-width 和 max-width 之后使用 display:inline-block 或 display:block; 可选一个 overflow:hidden;

table td {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100px;
  min-width: 50px;
  display:block;
  display:inline-block;
}

Answer 4

与其试图强行挤压表格以适应屏幕，不如让它看起来不错，并在空间不足时滚动。用overflow-x:auto;将它包裹在一个元素中：

.tables {
  overflow-x: auto;
}
table,tr,td,th {
  border: 1px solid black;
}

table tr td:nth-child(1) {
    background-color: red;
}

table {
  margin-left: 20px;
}

th,td {
  min-width: 50px;
  padding: 4px 8px;
}

<div class="tables">
  <table>
    <tr>
      <th>No Seq</th>
      <th>Department</th>
      <th>Person in Charge</th>
      <th>Project Title</th>
      <th>Objectives</th>
      <th>How To Do</th>
      <th>Activities</th>
      <th>Project Started</th>
      <th>Project Completed</th>
      <th>Target Cost Saving(RM)/Year</th>
      <th>Cost Saving After Justification</th>
      <th>Cost Saving Monthly</th>
    </tr>
    
   <tr id="row1">
      <td> <?php echo $id;?></td>
      <td id="department_row1"> <?php echo $department;?></td>
      <td id="pic_row1"> <?php echo $person_in_charge;?></td>
      <td id="protitle_row1"> <?php echo $project_title;?></td>
      <td id="objective_row1"> <?php echo $objective;?></td>
      <td id="howtodo_row1"><?php echo $how_to_do;?></td>
      <td id="activities_row1"> <?php echo $activities;?></td>
      <td id="prostart_row1"> <?php echo $project_started;?></td>
      <td id="procompl_row1"> <?php echo $project_completed;?></td>
      <td id="targetcost_row1"> <?php echo $target_cost_saving;?></td>
      <td id="costafter_row1"> <?php echo $costsaving_afterjustification;?></td>
      <td id="costmonthly_row1"> <?php echo $costsaving_monthly;?></td>
      </tr>
      </table>
      </div>

您还应该从表中删除 width: 140%。

还要注意<div>s 上的name 属性不是有效的HTML。它仅用于表单元素，其目的是提供一种通过 GET 和 POST 请求索引数据的机制。