html - 为什么我的表格不能在 div 内缩放？

Question

我有一个非常简单的家庭作业网页。正文仅由各个部分 div /divbr 组成。效果是每个部分都有不同的盒子。我的大多数学生没有电脑，他们只有一部手机。所以我正在努力让网页在手机上显示得更好。我放：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在标题中。

我将所有 div 设置为 width:95%;

现在一切都很好地显示在我的手机上。文字大小适中，一切都在手机屏幕的范围内，无需两指放大。

除了我的桌子。

    .div-table
    {
    	width:95%;
    	border:3px;
    	border-style:solid; 
    	border-color:#FF0000;
    	text-align:center;
    	background-color:#32d140;
    	
    }
    table
    {
    	margin:0 auto;
    	width:90%; 	
    	text-align:center;
    	background-color:whitesmoke;	
    	border-collapse: separate;
       border: 2px solid black;
    	 }
    table td {
      /*border: 2px solid black;*/
      border-style:dotted; 
      border-width:3px; 
      border-collapse:separate;
      padding: 10px;
    }

<div class="div-table">
  <p>
    <table>
      <tr> <td>A watches</td> <td>B cinema</td> <td>C weird</td> <td>D doesn&#39;t</td> <td>E like</td> </tr> 
      <tr> <td>F games</td> <td>G talking</td> <td>H guy</td> <td>I unusual</td> <td>J teaches</td> </tr> 
    </table>
  </p>
</div>

该表溢出其 div。您可以向右滚动一下以查看最后一列。该表是 2 行，每行 5 个单元格。我现在将其更改为 5 行 2 个单元格以解决此问题，但我更喜欢 2 行 5 列。

为什么我的表不缩小以适应其 div？你能帮我调整css来缩小表格吗？

标签： htmlcss

Answer 1

我不确定您是否可以将其限制table在其中div并以每种分辨率成功显示它。

另一种解决方案是允许table溢出，从而使其可滚动：

添加overflow-x: auto;到div-table应该适合您：

CSS

.div-table {
  width:95%;
  border:3px;
  border-style:solid; 
  border-color:#FF0000;
  text-align:center;
  background-color:#32d140;
  overflow-x:auto;
}

.div-table {
  width:95%;
  border:3px;
  border-style:solid; 
  border-color:#FF0000;
  text-align:center;
  background-color:#32d140;
  overflow-x:auto;
}

table {
  margin:0 auto;
  width:90%;  
  text-align:center;
  background-color:whitesmoke;    
  border-collapse: separate;
  border: 2px solid black;
}

table td {
  /*border: 2px solid black;*/
  border-style:dotted; 
  border-width:3px; 
  border-collapse:separate;
  padding: 10px;
}

<div class="div-table">
<p>
 <table>
 <tr> <td>A watches</td> <td>B cinema</td> <td>C weird</td> <td>D doesn&#39;t</td> <td>E like</td> </tr> 
 <tr> <td>F games</td> <td>G talking</td> <td>H guy</td> <td>I unusual</td> <td>J teaches</td> </tr> 
 </table>
 </p>
</div>