如何使 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