html - 2 乘 2 响应表

标签 html css

我在制作执行以下操作的响应表时遇到问题。使用媒体查询,它使每个表数据 (td) 都拥有表行 (tr)。

这里每个字母都是一个td。 A和B在一排,C和D在一排。

-----
-A-B-
-C-D-
-----

这里每个字母都是一个td。 A、B、C 和 D 都在单独的一行中打开。

-----
--A--
--B--
--C--
--D--
-----

我该怎么做?

最佳答案

给你:

只需使用媒体查询,您就可以实现这一目标

@media only screen and (max-width: 760px){
 table, thead, tbody, th, td, tr {
  display: block;
 }
}

https://jsfiddle.net/pf21euep/

关于html - 2 乘 2 响应表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42617811/

相关文章:

javascript - 在 Div 中随机移动元素

javascript - 适用于 chrome 但不适用于 firefox、Eventlistener、appendChild 和 style.backgroundColor

php - jQuery e.preventDefault() 不工作

jquery - 为什么不应用样式表(通过 jQuery 添加)?

javascript - 悬停 img 链接时更改文本

html - 跨平台垂直对齐 Section 中的内容

css - twitter bootstrap box-sizing 破坏了我的布局

php - textarea根据内容js或jquery设置高度

Javascript querySelectorAll,如何只匹配顶部元素?

html - css 内容字符呈现奇怪