HTML之table表格经典CSS（可用它做简单的数据看板）
公司有个业务需求，做一个数据看板，觉得这个CSS样式海不错，堪称经典！下面分享一下“数据看板”的表格Table CSS样式，欢迎非写前端的WEB程序员点赞收藏，以备不时之需。
<!--DOCTYPE html-->
<html lang="zh-CN">
<header>
<title>数据统计</title>
<style>body {font: normal 14px auto “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;}a {color: #c75f3e; text-decoration:none;}input{ height:28px;text-align:center; line-height:2; }.myTable {border-collapse: collapse;margin: 25px 0;font-size: 0.9em;font-family: sans-serif;min-width: 400px;box-shadow: 0 0 20px rgba(0,0,0,0.15);}.myTable thead tr {background-color: #009879;color: #ffffff;text-align: left;}.myTable th,.myTable td {padding: 12px 15px;}.myTable tbody tr {border-bottom: 1px solid #dddddd;}.myTable tbody tr:nth-of-type(even) {background-color: #f3f3f3;}.myTable tbody tr:last-of-type {border-bottom: 2px solid #009879;}.myTable tbody tr.active-row {font-weight: bold;color: #009879;}/* 可选：悬停效果 */.myTable tbody tr:hover {background-color: #f1f1f1;}.card-body{ text-align:center; }.toCenter{ text-align:center; }.toLeft{ text-align:left; }.toRight{ text-align:right; }.layui-input { width:160px !important; display:inline !important; }.bold{font-weight:bold}.quickClick{ margin-left:10px;width:300px;border:1px solid #ccc;display:block;text-align:center;float:right;line-height:220%;border-radius:10px; }.quickClick span{ margin-left:10px; cursor:pointer;}.exportData{ }
</style>
<script src="//www.962699.com/js/jquery.min.js"></script>
<link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
<script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
<script>layui.use(function(){var laydate = layui.laydate;// 日期选择器渲染laydate.render({elem: '#datepicker'});laydate.render({elem: '#datepicker2'});
});$(function(){ $('.exportData').click(function(){console.log('---exportData---');let g_id = $('#g_id').val();let start_date = $('#datepicker').val();let end_date = $('#datepicker2').val();self.location.href = '/goldmall/statistic?g_id='+g_id+'&start_date='+start_date+'&end_date='+end_date+'&action=exportData';});
});
</script>
</header>
<body><!--about start-->
<div class="container" style="border:0px solid #ccc;margin:0 auto; width:1200px"><div class="we-content" style="margin-top:20px;"><div class="card mb-3"><div class="row" style=""><div class="toCenter"><a href="/goldmall/statistic"><img width=100 src="/images/fnzblogo.jpg" width="80%" class="card-img" alt="..." /></a></div><div class="col-md-9"><div class="card-body"><h3 class="card-title">金币商城-数据统计</h3><div class="toLeft" style="margin-top:20px;"><form action="/goldmall/statistic" method="post"><div>商品ID： <input type="text" id="g_id" name="g_id" class="layui-input" style="width:90px !important;" value=""> 开始日期： <input type="text" id="datepicker" class="layui-input start_date" placeholder="yyyy-MM-dd" name="start_date" value="2025-10-15"> 截止日期： <input type="text" id="datepicker2" class="layui-input end_date" name="end_date" placeholder="yyyy-MM-dd" value="2025-10-15"> <input type="submit" value="查询" class="layui-btn layui-btn-normal" style="margin-top:-3px;border-radius:30px;height:30px;line-height:8px;"><input type="button" value="导出" class="layui-btn layui-btn-danger exportData" style="border-radius:30px;height:30px;line-height:8px; margin-top:-3px;margin-left:10px; "></div><table border="1" class="mytable toCenter" width="100%"><tr><th width="100">商品ID</th><th>商品名称</th><th width="100">PV(未去重)</th><th width="100">UV(去重)</th><th width="100">加购(未去重)</th><th width="100">销量</th><th width="100">转化率</th><th width="100">日期</th></tr><tr title="sort: 1"><td>21005859</td><td>支付宝券话费20元红包(100金币特价秒杀，每日上午10点更新库存)ZM</td><td>2134</td><td>1276</td><td>212</td><td>30</td><td>2.35%</td><td>2025-10-15</td></tr><tr title="sort: 2"><td>21008720</td><td>支付宝话费红包-限时特惠180元+500金币（话费新客可购买1次）ZM</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>2025-10-15</td></tr><tr title="sort: 3"><td>21008861</td><td>支付宝话费红包1元（新客特惠1金币 可购买1次）ZM</td><td>333</td><td>310</td><td>142</td><td>37</td><td>11.94%</td><td>2025-10-15</td></tr></table></form></div><span class="card-title" style="color:#ccc;">每5分钟更新一次数据</span> <span> <span class="card-title" style="color:#ccc;">© 数据看板 2025 </span> </div></div></div></div></div>
</div>
<!--about end--></body>
</html>