css 使HTML表响应,需要responsive_tables.js

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 使HTML表响应,需要responsive_tables.js相关的知识,希望对你有一定的参考价值。

/* Credits:
    This bit of code: Exis | exisweb.net/responsive-tables-in-wordpress
    Original idea: Dudley Storey | codepen.io/dudleystorey/pen/Geprd */
  
@media screen and (max-width: 600px) {
    table {width:100%;}
    thead {display: none;}
    tr:nth-of-type(2n) {background-color: inherit;}
    tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
    tbody td {display: block;  text-align:center;}
    tbody td:before { 
        content: attr(data-th); 
        display: block;
        text-align:center;  
    }
}

以上是关于css 使HTML表响应,需要responsive_tables.js的主要内容,如果未能解决你的问题,请参考以下文章

HTML 表格 - 使单列响应

如何在响应循环中制作文本responsive as well

如何使 Bootstrap Carousel 中的图像具有响应性?

使用 HTML/CSS(响应式设计)使可变数量的 div 并排放置在相同的高度上?

如何使文本在 html/css 中响应?

html HTML / CSS:使表格响应的简单方法