Question

我一直在网上搜索，但找不到解决方案。我做了一个连续2行和2个单元格的表格。如果屏幕宽度变小，表格将变为4行，连续1个单元格。这有效。但是，当使屏幕宽度变小时，表格单元格中的内容（<p>和<h3>）不会调整大小。很奇怪，因为我将宽度设置为100％。任何人都可以帮助我吗？

表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>
    </div>

CSS：

.qualities {

    width: 100%;
    max-width: 1000px; 
    overflow: auto;

}

.qualities h3 {

    color: white;
    padding: 0;
    margin: 0px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;

}



.qtable {

    overflow: auto;
    width: 100%;
    margin-top: 20px;
    border-spacing: 40px 0px; 
    width:500px;

}


.qtable td {

    resize: horizontal;
    overflow: auto; 
}
td img {

    height: 40px; 
    width: auto;
    margin-top: 0px;


}

.qtable p {

    min-width: 400px;
    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%; 
    }
p {
    width: 100%;
  } 

}

Answer 1

从min-width: 400px;规则中删除.qtable p。

.qualities {
  width: 100%;
  max-width: 1000px;
  overflow: auto;
}

.qualities h3 {
  color: white;
  padding: 0;
  margin: 0px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

.qtable {
  overflow: auto;
  width: 100%;
  margin-top: 20px;
  border-spacing: 40px 0px;
}

.qtable td {
  resize: horizontal;
  overflow: auto;
}

td img {
  height: 40px;
  width: auto;
  margin-top: 0px;
}

.qtable p {
  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%;
  }
  p {
    width: 100%;
  }
}

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

表格单元格中的段落未使用屏幕大小调整大小

1 个答案: