【问题标题】:How to avoid display block for a particular div element using css如何使用 css 避免特定 div 元素的显示块
【发布时间】: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
  • 显示:inlineinline-blocknoneflexinitialinherit,嗯,还有很多,选择一个

标签: html css html-table responsive


【解决方案1】:

可能是这样的吗?

@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 table, #content th, #content tbody, #content td, #content thead {
        display: initial;
    }

}

【讨论】:

  • 感谢@Kodie Grantham 显示:初始;在我的情况下效果很好。
【解决方案2】:

您还可以使用:not 来避免仅使用该#content 表。

@media only screen and (max-width: 460px) {


 /* Force table to not be like tables anymore  */
    table:not(#content table),
    th:not(#content th),
    tbody:not(#content tbody),
    td:not(#content td),
    thead:not(#content thead) { 
        display: block; 
        width: 100%;
    }

#content {


    }

 }

这个或@KodieGrantham 的解决方案应该工作;哪一个可能是偏好问题。

【讨论】:

  • 是的,这个也解决了@Nick Barth 的问题!
猜你喜欢
  • 2019-07-02
  • 2014-11-19
  • 2017-04-24
  • 1970-01-01
  • 2018-06-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多