HTML:
<div class="table-container"> <table style="width: 90%; margin-left: 5%"> <tr class="table-title"> <th style="width: 33%">科室名称</th> <th style="width: 33%">当日登录次数</th> <th style="width: 33%">当月登录次数</th> </tr> <tbody class="table-list"> <tr v-for="(item, index) in tableData" :key="index"> <td class="first-column"> {{ item.ksmc }} </td> <td> <div class="inner-columns">{{ item.cishu }}</div> </td> <td> <div class="inner-columns">{{ item.yuecishu }}</div> </td> </tr> </tbody> </table> </div>
CSS:
.table-container { border: none !important; border-radius: 8px; border-color: #77b8ff; background: linear-gradient(90deg, #a8d1ff, #62adff); box-shadow: 0px 9px 28px 8px rgba(130, 141, 249, 0.12); height: 90%; .table-title { color: white; font-weight: bold; font-size: 16px; line-height: 50px; } .table-list { padding: 10px; width: 100%; height: 90%; font-size: 14px; text-align: center; } } .first-column { background-color: #74b6ff; /* 蓝色背景 */ color: white; /* 白色字 */ border-radius: 40px; /* 圆角 */ width: 30%; height: 30px; } .inner-columns { background-color: #e3f0fe; /* 白色背景 */ color: #74b6ff; /* 蓝色字 */ border-radius: 40px; font-weight: bold; /* 加粗 */ width: 70%; height: 30px; line-height: 30px; margin-left: 15%; }
当有多条数据时,添加以下样式时每条数据之间有一定间距:
.table-container table { border-collapse: separate; /* 确保这是默认值或显式设置 */ border-spacing: 0 10px; /* 第一个值是水平间距,第二个值是垂直间距,用于调整行间距 */ }
标签:自定义,表格,样式,height,color,table,font,border,30px From: https://www.cnblogs.com/tingorb/p/18431503