表格单元格内<p>与<h3>内容无法随屏幕尺寸自适应求助

嘿，我看了你的代码，马上发现几个导致内容无法随屏幕调整的关键问题：

1. 你的.qtable p设置了min-width: 400px——这意味着不管屏幕多小，段落元素至少要占400px宽度，直接超出小屏幕的可视范围，自然没法自适应。
2. .qtable同时设置了width: 100%和width:500px，后面的固定宽度会覆盖百分比宽度，让表格没法随父容器缩放。
3. 媒体查询里的p { width: 100%; }优先级不够，因为.qtable p的选择器权重更高，所以这个样式不会生效。

下面是修改后的完整代码，我把这些问题都修复了：

修改后的HTML代码（结构无需调整） #

<div class="qualities" align="center"> 
 <table class="qtable" align="center"> 
  <tr align="center"> 
   <td> 
    <img src="images/qualityicon.png"> 
    <h3>Uitstekende kwaliteit</h3> 
    <p>Djellaba's zijn handgemaakt door echte vakmensen. Door een combinatie van allerlei verschillende stoffen, meesterlijk vakmanschap en excentrieke nauwkeurigheid, resulteert een Djellaba in een hoogwaardig vakproduct. </p> 
   </td> 
   <td> 
    <img src="images/susticon.png"> 
    <h3>Duurzaam</h3> 
    <p>Ons product is gemaakt van een hoogwaardige stof, die geen negatieve bijdrage levert aan het milieu. Daarnaast is het productieproces van de Djellaba 100% CO2 vrij. Dit alles zorgt voor een zeer milieuvriendelijk product. </p> 
   </td> 
  </tr> 
  <tr align="center"> 
   <td> 
    <img src="images/relax.png"> 
    <h3>Relax</h3> 
    <p>Door de wijde vorm van de Djellaba zit hij heel comfortabel en relaxt, je kan er bijvoorbeeld heerlijk mee op de bank een film kijken of gewoon lekker koken. </p> 
   </td> 
   <td> 
    <img src="images/knife.png"> 
    <h3>Multifunctioneel</h3> 
    <p>De Djellaba is voor meer te gebruiken dan alleen een kledingstuk. Zo kun je de Djellaba ook gebruik om vlekken mee schoon te maken of om dingen onder te verstoppen! </p> 
   </td> 
  </tr> 
 </table> 
</div>

修改后的CSS代码 #

.qualities { 
  width: 100%; 
  max-width: 1000px; 
  overflow: auto; 
  margin: 0 auto; /* 用CSS实现容器居中，替代过时的align属性 */
} 
.qualities h3 { 
  color: white; 
  padding: 0; 
  margin: 0px; 
  font-family: 'Open Sans', sans-serif; 
  font-weight: 400; 
  width: 100%; /* 确保标题也能自适应宽度 */
} 
.qtable { 
  overflow: auto; 
  width: 100%; /* 保留百分比宽度，删除固定的width:500px */
  margin-top: 20px; 
  border-spacing: 40px 0px; 
} 
.qtable td { 
  resize: horizontal; 
  overflow: auto; 
  width: 100%; /* 强制单元格宽度占满容器 */
} 
td img { 
  height: 40px; 
  width: auto; 
  margin-top: 0px; 
} 
.qtable p { 
  max-width: 100%; /* 替换min-width，确保段落不溢出屏幕 */
  width: 100%; 
  margin-top: 0px; 
  padding-bottom: 20px; 
  font-family: 'Open Sans', sans-serif; 
  font-weight: 300; 
} 
@media screen and (max-width:768px){ 
  table, thead, tbody, th, td, tr { 
    display: block; 
    width: 100%; 
  } 
  .qtable p { /* 用更具体的选择器保证样式生效 */
    width: 100%; 
  } 
  .qtable {
    border-spacing: 0; /* 小屏幕下移除单元格间距，避免多余空白 */
  }
}

关键修改点说明： #

• 移除.qtable的固定宽度，让表格完全跟随父容器缩放
• 删除.qtable p的min-width:400px，换成max-width:100%防止段落溢出
• 媒体查询中使用更具体的选择器，确保自适应样式优先生效
• 用CSSmargin:0 auto替代HTMLalign属性，符合现代前端规范
• 小屏幕下移除表格间距，优化单列布局的视觉效果

这样修改后，你的表格在小屏幕下不仅能正常转为单列，单元格内的标题和段落也会完全适配屏幕宽度啦！

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