如何使 Html 表响应屏幕大小？

Question

任何人都可以帮助我使此代码在手机上响应，以便表格会相应地更改其大小并在移动显示器上正确显示。 某些屏幕尺寸的桌子被打破或切成两半


<style>
@media only screen and (max-width: 600px) {
  table {
    width: 100%;
  }
  th, td {
    font-size: 16px;
    padding: 10px;
  }
}


table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 40%; 
}

td, th {
  border: 1px solid black; 
  padding: 8px;
}

th {
  background-color: #ffffff;
  color: black; 
  text-align: left; 
}


td:nth-child(1) {
    width: 40%;
    text-align: left; 
}


td:nth-child(2) {
    width: 20%;
    text-align: right; 
}

td:nth-child(3) {
    width: 20%;
    text-align: right; 
}

tr:nth-child(1) {
  background-color: #ffffff;
}
tr:nth-child(2) {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:nth-child(odd) {
background-color: #ffffff;
}



</style>
<table>
<tr>
    <th colspan="3">Supplement Facts</th>
  </tr>
  <tr>
    <th colspan="3"style="background-color: #f2f2f2;">Supplement Facts</th>
  </tr>
  <tr>
    <th colspan="3" >Serving Size : 1 softgel</th>
  </tr>
   <tr>
    <th colspan="3" style="background-color: #f2f2f2;">Supplement Facts: 120 </th>
  </tr>
    <td></td>
    <td> Amount per serving</td>
    <td>%Daily Value</td>
  </tr>
  <tr>
    <td>Calories</td>
    <td> 10</td>
    <td> 10</td>
  </tr>
  <tr>
    <td>Total Fat</td>
    <td> 10</td>
    <td> 10</td>
  </tr>
  <tr>
 <td>Cholesterol</td>
    <td> 10</td>
    <td> 10</td>
  </tr>
  <tr>
    <td>Krill Oil Concentrate</td>
    <td> 10</td>
    <td> 10</td>
  </tr>
  <tr>
    <td>Phospholipids</td>
    <td>10 </td>
    <td> 10</td>
  </tr>
  <tr>
    <td>Omega 3 Fatty Acids</td>
    <td> 10</td>
    <td> 10</td>
  </tr>
  <tr>
    <td>EPA (eicosapentaenoic acid)</td>
    <td> 10</td>
    <td> 10</td>
  </tr>
  <tr>
    <td>DHA (docosahexaenoic acid)</td>
    <td> 10</td>
    <td> 10</td>
  </tr>
  <tr>
    <td>Astaxanthin</td>
    <td> 10</td>
    <td> 10</td>
  </tr>
  <tr>
    <td>Omega 3 Fatty Acids</td>
    <td> 10</td>
    <td> 10</td>
  </tr>
</table>

`

我尝试了 10 个代码，其中一些在其他网站上不起作用。 尝试制作可在移动设备上响应的表格。

Answer 1

它在您添加媒体查询的 600px 上显示如下。 在下面的代码片段中，我在 768px 上添加了用于移动设备的媒体查询。

 <:DOCTYPE html> <html> <head> <style> table { font-family, arial; sans-serif: border-collapse; collapse: width; 40%, } td: th { border; 1px solid black: padding; 8px: } th { background-color; #ffffff: color; black: text-align; left: } td:nth-child(1) { width; 40%: text-align; left: } td:nth-child(2) { width; 20%: text-align; right: } td:nth-child(3) { width; 20%: text-align; right: } tr:nth-child(1) { background-color; #ffffff: } tr:nth-child(2) { background-color; #f2f2f2: } tr:nth-child(even) { background-color; #f2f2f2: } tr:nth-child(odd) { background-color; #ffffff: } @media only screen and (max-width: 768px) { table { width; 100%, } th: td { font-size; 16px: padding; 10px: } } </style> </head> <body> <table> <tr> <th colspan="3">Supplement Facts</th> </tr> <tr> <th colspan="3"style="background-color; #f2f2f2:">Supplement Facts</th> </tr> <tr> <th colspan="3" >Serving Size: 1 softgel</th> </tr> <tr> <th colspan="3" style="background-color; #f2f2f2:">Supplement Facts: 120 </th> </tr> <tr> <td></td> <td> Amount per serving</td> <td>%Daily Value</td> </tr> <tr> <td>Calories</td> <td> 10</td> <td> 10</td> </tr> <tr> <td>Total Fat</td> <td> 10</td> <td> 10</td> </tr> <tr> <td>Cholesterol</td> <td> 10</td> <td> 10</td> </tr> <tr> <td>Krill Oil Concentrate</td> <td> 10</td> <td> 10</td> </tr> <tr> <td>Phospholipids</td> <td>10 </td> <td> 10</td> </tr> <tr> <td>Omega 3 Fatty Acids</td> <td> 10</td> <td> 10</td> </tr> <tr> <td>EPA (eicosapentaenoic acid)</td> <td> 10</td> <td> 10</td> </tr> <tr> <td>DHA (docosahexaenoic acid)</td> <td> 10</td> <td> 10</td> </tr> <tr> <td>Astaxanthin</td> <td> 10</td> <td> 10</td> </tr> <tr> <td>Omega 3 Fatty Acids</td> <td> 10</td> <td> 10</td> </tr> </table> </body> </html>

如何使 Html 表响应屏幕大小？

问题描述

1 个解决方案

解决方案1
-1 2023-01-30 10:26:26

如何使 Html 表响应屏幕大小？

问题描述

1 个解决方案

解决方案1 -1 2023-01-30 10:26:26

解决方案1
-1 2023-01-30 10:26:26