一键生成响应式表格
2019-02-28
| Web开发 | 阅读 | 238 字 | 1 分钟这是一个一键生成响应式表格的方案。
table { width: 100%; border-collapse: collapse; text-align: center; line-height: 40px; table-layout: fixed; color: #333; font-weight: normal; font-size: 14px; margin: 5% 0; td{ padding: 10px; } thead { background-color: #cce5ff; font-weight: 500; } }
table-bordered { border: 1px solid #e0e0e0; }
.table-bordered { th { background: #e4efff; border: 1px solid #e0e0e0; font-weight: normal; height: auto; } td { background: #e4efff; border: 1px solid #e0e0e0; font-weight: normal; height: auto; } thead { th { border-bottom: 1px; font-weight: 500; height: auto; } td { border-bottom: 1px; font-weight: 500; height: auto; } } }
|
<table border="0" cellspacing="0" cellpadding="0" class="table table-bordered"> <thead> <tr> <th style="width: 40%;">题型</th> <th>题量</th> <th>分值</th> </tr> </thead> <tbody> <tr > <td>{{chapter.name}}</td> <td>{{chapter.questionCount}} 题</td> <td>{{chapter.presetScore}}分</td> </tr> </tbody> </table>
|
本文标题:一键生成响应式表格
文章作者:Canace
发布时间:2019-02-28
最后更新:2025-09-14
原始链接:https://canace.site/one-click-generate-responsive-table/
版权声明:转载请注明出处
分享