首页 > 其他分享 >自定义表格样式

自定义表格样式

时间:2024-09-25 15:46:08浏览次数:7  
标签:自定义 表格 样式 height color table font border 30px

 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

相关文章

  • WPS表格提示:“您输入的内容不符合限制条件”解决办法
    在使用wps表格的时候,如下图所示,我想输入成都这个数据,弹出错误提示:“您输入的内容不符合限制条件”该如何解决呢?按照图下所示,选中出现错误提示的单元格,点击有效性此时出现的窗口中明确表明,允许的数据必须是序列,且序列为北京,上海,广州,深圳。如果出现其他的数据(不包括空值)就会......
  • 多用户自定义商城小程序源码系统 独立部署 到源代码包以及搭建部署教程
    系统概述随着移动互联网的迅猛发展,消费者的购物习惯逐渐向线上转移。传统电商平台虽然提供了一定的便利,但也存在一些局限性,如高昂的入驻费用、缺乏个性化定制等。为了适应市场需求,多用户自定义商城小程序源码系统应运而生。这一系统的开发旨在为企业和商家提供一个自主掌控、......
  • 前端使用xlsx模板导出表格
    前端使用xlsx模板导出表格 前言前端导出表格有很多种方案,但是表格样式一旦复杂了,那么就得用代码写excel的样式,还是比较麻烦的。每次样式不一样,就得重新写,这时使用表格模板的优势就体现出来了,想导出不同样式的表格直接修改表格模板即可。方案我找了两种方案:1、使用xlsx-tem......
  • 自定义类型:结构体
    1.结构体类型的声明structtag{member-list;}variable-list;例如描述一个学生:structStu{charname[20];//名字intage;//年龄charsex[5];//性别charid[20];//学号};//分号不能丢structStu{charname[20];//名字intage;//年龄char......
  • 关于在vue2中自定义右键弹窗
            所需变量//右键点击的弹框对象rightDialogbox:null,//鼠标点击后获取的文本chooseText:'',//弹窗的偏移left:'',top:'',//右键点击的弹框显隐rightDialogShow:false,一、阻止原生事件......
  • 第三章 表格布局与表单交互
    3.1表格概述3.1.1表格的结构表格是由行和列组成的二维表,而每行又由一个或多个单元格组成,用于放置数据或其他内容3.1.2表格的基本语法<table></table>//表格说明<caption></caption>//表格标题标记<th></th>//表格表头标记 <tr></tr>//行<td></td>//列<tableborder......
  • PyTorch自定义学习率调度器实现指南
    在深度学习训练过程中,学习率调度器扮演着至关重要的角色。这主要是因为在训练的不同阶段,模型的学习动态会发生显著变化。在训练初期,损失函数通常呈现剧烈波动,梯度值较大且不稳定。此阶段的主要目标是在优化空间中快速接近某个局部最小值。然而,过高的学习率可能导致模型跳过潜在的......
  • helm初始化自定义应用
    使用Helm初始化一个应用(即创建一个HelmChart),可以通过Helm提供的helmcreate命令生成一个基础的HelmChart目录结构。下面是具体步骤:1.安装Helm首先确保你的环境中已经安装了Helm。如果还没有安装,可以按照Helm官方文档进行安装:Helm安装文档2.初始化HelmCh......
  • Android连接蓝牙自定义封装SDK(基于Cordova与ionic)
    今天给大家分享一款基于Cordova与ionic框架自定义封装的Android手机连接蓝牙的插件。自己公司遇到的业务需求是,与第三方公司合作,需要在项目现场打印项目物资与物料验收单,后期提供给财务核对报销等。第三方公司提供蓝牙打印机与手持机,我们需要自己结合业务开发相对应的功能。......
  • OpenCV_自定义线性滤波(filter2D)应用详解
    OpenCVfilter2D将图像与内核进行卷积,将任意线性滤波器应用于图像。支持就地操作。当孔径部分位于图像之外时,该函数根据指定的边界模式插值异常像素值。卷积核本质上是一个固定大小的系数数组,数组中的某个元素被作为锚点(一般是数组的中心)。上面讲了线性滤波的实质就是计算相......