【发布时间】:2016-12-25 17:56:02
【问题描述】:
在我的媒体查询中,我设置了要显示的表格:块。所以现在显示:块现在适用于网站的所有元素。如何避免显示:阻塞,因此它不适用于一个特定的 div 元素。
{ font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th, tr{
border: 1px solid #dddddd;
text-align: left;
padding: 10px;
}
@media only screen and (max-width: 460px) {
/* Force table to not be like tables anymore */
table, th, tbody, td, thead {
display: block;
width: 100%;
}
#content {
}
}
<div id="content">
<h1>Article Question is</h1>
<p>Below I have table inside the article. How to avoid display block for the table below on mobile screens?</p>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</div>
【问题讨论】:
-
把
display: block;给你想给block的唯一元素 -
这样的? prntscr.com/c7e87y
-
显示:
inline,inline-block,none,flex,initial,inherit,嗯,还有很多,选择一个
标签: html css html-table responsive