Question

如何制作一个响应式的HTML5表格

Answer 1

　　前段时间在网上看到了一个老外写的一个HTML5响应式表格效果，它的CSS代码用SASS写的，有许多重复的data属性。我们这里改进一下他的代码，解决一下他写的不好的地方。要看到本例的响应式表格效果，浏览器要缩放到小于600像素的大小。HTML结构如下：

　　<tableid="miyazaki">
　　<caption>The Films of Miyazaki</caption>
　　<thead>
　　<tr><th>Film<th>Year<th>Honor
　　<tbody>
　　<tr>
　　<tddata-th="Film">My Neighbor Totoro
　　<tddata-th="Year">1988
　　<tddata-th="Honor">Blue Ribbon Award (Special)
　　<tr>
　　<tddata-th="Film">Princess Mononoke
　　<tddata-th="Year">1997
　　<tddata-th="Honor">Nebula Award (Best Script)
　　<tr>
　　<tddata-th="Film">Spirited Away
　　<tddata-th="Year">2001
　　<tddata-th="Honor">Academy Award (Best Animated Feature)
　　<tr>
　　<tddata-th="Film">Howl’s Moving Castle
　　<tddata-th="Year">2004
　　<tddata-th="Honor">Hollywood Film Festival (Animation OTY)
　　</table>
　　注意代码中的data属性，每一个单元格的data属性都与表格的header相对应。

　　CSS样式

　　表格基本的CSS样式如下：

　　table#miyazakicaption{
　　font-size:2rem;color:#444;
　　margin:1rem;
　　background-image:url(miyazaki.png),url(miyazaki2.png);
　　background-size: contain;
　　background-repeat:no-repeat;
　　background-position:centerleft,centerright;
　　}
　　table#miyazaki {
　　border-collapse:collapse;
　　font-family: Agenda-Light;font-weight:100;
　　background:#333;color:#fff;
　　text-rendering:optimizeLegibility;
　　border-radius:5px;
　　}
　　table#miyazaki thead th {font-weight:600; }
　　table#miyazaki thead th, table#miyazaki tbody td {
　　padding: .8rem;font-size:1.4rem;
　　}
　　table#miyazaki tbody td {
　　padding: .8rem;font-size:1.4rem;
　　color:#444;background:#eee;
　　}
　　table#miyazaki tbody tr:not(:last-child) {
　　border-top:1pxsolid#ddd;
　　border-bottom:1pxsolid#ddd;
　　}
　　下面是响应式表格的CSS代码：

　　@mediascreenand (max-width:600px) {
　　table#miyazakicaption{background-image:none; }
　　table#miyazaki thead {display:none; }
　　table#miyazaki tbody td {display:block;padding: .6rem; }
　　table#miyazaki tbody tr td:first-child {background:#333;color:#fff; }
　　table#miyazaki tbody td:before {
　　content:attr(data-th);font-weight:bold;
　　display:inline-block;width:6rem;
　　}
　　}
　　media query代码中隐藏表格的头部单元，并且将每一个单元格的data-th作为标签显示在单元格内容的前面。每一行的第一个单元格都设置了特别的背景色和前景色，使之更为清晰。