如何根据屏幕分辨率使用 table 行?(响应:桌面,标签,移动)
how to use table rows according to screen resolution ?(responsive:desktop,tab,mobile)
使用 table css 设计 table.I 每 tr
使用两个 td
桌面视图(1200px)。如果我转到移动视图 (768px),它应该合并到一个 row.same 转到移动视图。
Html: 对于每个 tr 有两个 td 对于桌面视图它是 set.But 对于 Tab 视图需要一行一行显示
<table>
<tr>
<td>Model Year: <span class="value">{{vinResults[0].modelYear}}</span></td>
<td>Fuel : <span class="value">{{vinResults[0].fuel}}</span></td>
</tr>
<tr>
<td>Make : <span class="value">{{vinResults[0].make}}</span></td>
<td>Brake System : <span class="value">{{vinResults[0].brakeSystem}}</span></td>
</tr>
<tr>
<td>Vehicle Line : <span class="value">{{vinResults[0].vehicleLine}}</span></td>
<td>GVWR Class : <span class="value">{{vinResults[0].GVWRClass}}</span></td>
</tr>
</table>
scss:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 1154px;
height: 49px;
margin-left: 22px;
margin-top:40px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 15px;
}
tr:nth-child(odd) {
background: #F1F4F6 0% 0% no-repeat padding-box;
opacity: 1;
} //for every odd row color is added (not working for tab view).
我需要在选项卡视图和桌面视图中逐行显示 table 行我需要分两行显示。
像
一样使用媒体查询
*{
box-sizing:border-box;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
margin-top:40px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 15px;
}
tr:nth-child(odd) {
background: #F1F4F6 0% 0% no-repeat padding-box;
opacity: 1;
}
tr td .txt-label{
min-width:125px;
display:inline-block;
}
@media(max-width:767.9px){
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 15px;
display:block;
width:100%;
}
tr:nth-child(odd) {
background: transparent;
}
tr td:nth-child(odd) {
background: #F1F4F6 0% 0% no-repeat padding-box;
opacity: 1;
}
}
使用 table css 设计 table.I 每 tr
使用两个 td
桌面视图(1200px)。如果我转到移动视图 (768px),它应该合并到一个 row.same 转到移动视图。
Html: 对于每个 tr 有两个 td 对于桌面视图它是 set.But 对于 Tab 视图需要一行一行显示
<table>
<tr>
<td>Model Year: <span class="value">{{vinResults[0].modelYear}}</span></td>
<td>Fuel : <span class="value">{{vinResults[0].fuel}}</span></td>
</tr>
<tr>
<td>Make : <span class="value">{{vinResults[0].make}}</span></td>
<td>Brake System : <span class="value">{{vinResults[0].brakeSystem}}</span></td>
</tr>
<tr>
<td>Vehicle Line : <span class="value">{{vinResults[0].vehicleLine}}</span></td>
<td>GVWR Class : <span class="value">{{vinResults[0].GVWRClass}}</span></td>
</tr>
</table>
scss:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 1154px;
height: 49px;
margin-left: 22px;
margin-top:40px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 15px;
}
tr:nth-child(odd) {
background: #F1F4F6 0% 0% no-repeat padding-box;
opacity: 1;
} //for every odd row color is added (not working for tab view).
我需要在选项卡视图和桌面视图中逐行显示 table 行我需要分两行显示。
像
一样使用媒体查询*{
box-sizing:border-box;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
margin-top:40px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 15px;
}
tr:nth-child(odd) {
background: #F1F4F6 0% 0% no-repeat padding-box;
opacity: 1;
}
tr td .txt-label{
min-width:125px;
display:inline-block;
}
@media(max-width:767.9px){
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 15px;
display:block;
width:100%;
}
tr:nth-child(odd) {
background: transparent;
}
tr td:nth-child(odd) {
background: #F1F4F6 0% 0% no-repeat padding-box;
opacity: 1;
}
}