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

如果你插入分词符: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>