我想让我的桌子响应,但我不知道如何使用媒体查询,有人可以帮助我吗?我的目标是让我的 <button type="submit" [disabled]="!isugeoForm.form.valid" class="btn btn-
primary" (click)="pdfDownload()">Export pdf</button>
表现得像块一样,如果屏幕尺寸较小则会相互影响。
当前代码:
td
td{border:1px dotted red;background-color:red;color:white;}
p{font-family:'Varela Round';font-weight:bold;text-align:center;}
答案 0 :(得分:2)
您可以使用媒体查询更改td,从display:block更改为:table-cell,最小宽度为移动优先方法。
td{
display:block;
width:auto;
border:1px dotted red;
background-color:red;
color:white;
margin-bottom:10px;
}
@media only screen and (min-width: 70em) {
td{
display:table-cell;
border:1px dotted red;
background-color:red;
color:white;
margin-bottom:0px;
}
}
p{font-family:'Varela Round';font-weight:bold;text-align:center;}
<table width="100%" cellpadding="0" cellspacing="5">
<tbody>
<tr>
<td><p>SOCIETES</p></td>
<td><p>CONTACT</p></td>
<td><p>EMAIL NOMINATIF</p></td>
<td><p>OPT OUT</p></td>
<td><p>LIGNES DIRECTES/MOBILES</p></td>
</tr>
</tbody>
</table>