自定义表格样式

 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%;
}