HTML中的響應式多列表

-1

此代碼是多列表的示例。我有表包含合併的行或列。我怎樣才能讓他們敏感？我應該包括CSS還是應該更改制作表格而不是基於單元格的方法？HTML中的響應式多列表

<table> 
<tbody> 
    <tr> 
     <th align="left" style="border: 1px solid LightSkyBlue; border-collapse: collapse; background-color: #3366cc;" colspan="1" rowspan="2"><span style="color: white;"> 
     Konveksjonskilde 
     </span><span style="color: white;"> 
     </span></th> 
     <th align="left" style="border: 1px solid LightSkyBlue; border-collapse: collapse; background-color: #3366cc;" colspan="1" rowspan="2"><span style="color: white;">Aktivitet [met]</span></th> 
     <th align="left" style="border: 1px solid LightSkyBlue; border-collapse: collapse; background-color: #3366cc;" colspan="2" rowspan="1"><span style="color: white;">Luftmengde V<sub>kv, p</sub> [m<sup>3</sup>/(h∙person)]<br /> 
     </span></th> 
     </tr> 
    <tr> 
     <th align="left" style="border: 1px solid LightSkyBlue; border-collapse: collapse; background-color: #3366cc;" colspan="1" rowspan="1"><span style="color: white;">y<sub>s</sub> = 1,2 m<br /> 
     </span></th> 
     <th align="left" style="border: 1px solid LightSkyBlue; border-collapse: collapse; background-color: #3366cc;" rowspan="1" colspan="1"><span style="color: white;">y<sub>s</sub> = 1,8 m</span></th> 
    </tr> 
    <tr> 
     <td align="left" style="border: 1px solid LightSkyBlue; background-color: #e1f6fe;" rowspan="1" colspan="1"> Sittende, hvile </td> 
     <td align="left" style="border: 1px solid LightSkyBlue; background-color: #e1f6fe;" rowspan="1" colspan="1"> 1,0 </td> 
     <td align="left" colspan="1" rowspan="1" style="border: 1px solid LightSkyBlue; background-color: #e1f6fe;"> 29&ndash;36 </td> 
     <td align="left" style="border: 1px solid LightSkyBlue; background-color: #e1f6fe;" rowspan="1" colspan="1">&nbsp;-</td> 
    </tr> 
    <tr> 
     <td align="left" style="border: 1px solid LightSkyBlue;" rowspan="1" colspan="1"> Sittende, rolig aktivitet </td> 
     <td align="left" style="border: 1px solid LightSkyBlue;" rowspan="1" colspan="1"> 1,2 </td> 
     <td align="left" colspan="1" rowspan="1" style="border: 1px solid LightSkyBlue;"> 36&ndash;43 </td> 
     <td align="left" style="border: 1px solid LightSkyBlue;" rowspan="1" colspan="1">&nbsp;-</td> 
    </tr> 
    <tr> 
     <td align="left" colspan="1" rowspan="1" style="border: 1px solid LightSkyBlue; background-color: #e1f6fe;"> St&aring;ende, lett aktivitet </td> 
     <td align="left" colspan="1" rowspan="1" style="border: 1px solid LightSkyBlue; background-color: #e1f6fe;"> 1,6 </td> 
     <td align="left" colspan="1" rowspan="1" style="border: 1px solid LightSkyBlue; background-color: #e1f6fe;"> - </td> 
     <td align="left" style="border: 1px solid LightSkyBlue; background-color: #e1f6fe;" rowspan="1" colspan="1">90&ndash;108</td> 
    </tr> 
    <tr> 
     <td align="left" style="border: 1px solid LightSkyBlue;" rowspan="1" colspan="1"> St&aring;ende, middels aktivitet </td> 
     <td align="left" style="border: 1px solid LightSkyBlue;" rowspan="1" colspan="1"> 2,0 </td> 
     <td align="left" colspan="1" rowspan="1" style="border: 1px solid LightSkyBlue;"> - </td> 
     <td align="left" style="border: 1px solid LightSkyBlue;" rowspan="1" colspan="1">108&ndash;126 </td> 
    </tr> 
    <tr> 
     <td align="left" colspan="1" rowspan="1" style="border: 1px solid LightSkyBlue; background-color: #e1f6fe;"> St&aring;ende, h&oslash;y aktivitet </td> 
     <td align="left" colspan="1" rowspan="1" style="border: 1px solid LightSkyBlue; background-color: #e1f6fe;"> 3,0 </td> 
     <td align="left" colspan="1" rowspan="1" style="border: 1px solid LightSkyBlue; background-color: #e1f6fe;"> - </td> 
     <td align="left" style="border: 1px solid LightSkyBlue; background-color: #e1f6fe;" rowspan="1" colspan="1">126&ndash;144</td> 
    </tr> 
</tbody>

來源

2015-10-20 15C

響應式表格最好用[Flexbox]完成（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）。另外不要忘記設置您的CSS爲媒體類型，並設置您的視口。 –

它適用於所有設備嗎？手機等？ – 15C

如果你有正確的CSS，是的，它的確如此。不同的分辨率，不同的屏幕尺寸，不同的縮放級別等 –

-1

你會想是這樣的：

<td data-label="LabelName">Text Here</td>

**注意 '數據標籤'

然後添加這樣的事情，但編輯要你當然需要：

@media screen and (max-width: 600px) { 
table td:before { 
content: attr(data-label); 
float: left; 
text-transform: uppercase; 
font-weight: bold; 
}}

希望這有助於！

來源

2015-10-20 11:39:38 DJYumene

HTML中的響應式多列表

回答

相關問題