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中的响应式多列表

回答

相关问题