原生table样式

news2024/9/24 23:25:02

HTML

<div>
                        <table style="width: 100%;">
                            <thead>
                                <tr>
                                    <th style="width:25%;">董事会</th>
                                    <th style="width:25%;">监事会</th>
                                    <th style="width:25%;">股东</th>
                                    <th style="width:25%;">经理层</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th style="width:25%;" @click="goOrg(item)">{{item.org1}}</th>
                                    <th style="width:25%;" @click="goOrg(item)">{{item.org1}}</th>
                                    <th style="width:25%;" @click="goOrg(item)">{{item.org1}}</th>
                                    <th style="width:25%;" @click="goOrg(item)">{{item.org1}}</th>
                                </tr>
                            </tbody>
                        </table>

                    </div>

CSS

<style scoped>
    table {
        border-collapse: collapse;
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }

    table td,
    table th {
        border: 1px solid #e4e4e4;
        color: #666;
        height: 30px;
    }

    table thead th {
        background-color: #CCE8EB;
        width: 100px;
    }

    table tr:nth-child(odd) {
        background: #fff;
    }

    table tr:nth-child(even) {
        background: #f2f9ff;
    }

    th {
        font-size: 12px;
        color: #1989fa !important;
    }

    .th_ {
        background: #d1e7ff !important;
    }

    td {
        font-size: 12px !important;
        padding: 10px;
    }
</style>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1420586.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

物理信息神经网络PINN2024最新改良方案汇总(含复现代码)

传统的数值方法在处理复杂问题时可能需要大量的计算资源和时间&#xff0c;而改良后的PINN可以通过更有效的算法减少计算成本&#xff0c;使得求解过程更加高效。 在写论文时&#xff0c;我们也可以通过改进PINN减少数据需求、加速模型收敛、提高预测准确性、增强可解释性&…

linux -- 内存管理 -- SLAB分配器

SLAB分配器&#xff08;slab allocator&#xff09; SLAB分配器用于小内存空间管理&#xff0c;基本思想是&#xff1a;先利用页面分配器分配出单个或多个连续的物理页面&#xff0c;然后再此基础上将整块页面分割为多个相等的小内存单元&#xff0c;来满足小内存空间分配的需…

kerberos+kafka(2.13)认证(单节点ubuntu)

一&#xff1a;搭建kerberos。 1. 运行安装命令 apt-get install krb5-admin-server krb5-kdc krb5-user krb5-config2. 检查服务是否启动。 systemctl status krb5-admin-server systemctl status krb5-kdcsystemctl start krb5-admin-server systemctl startkrb5-kdc3. 修…

网络安全知识和华为防火墙

网络安全 网络空间安全 ---Cyberspace 2003年美国提出的网络空间概念 ---一个由信息基础设施组成的互相依赖的网络。 我国官方文件定义&#xff1a;网络空间为继海、陆、空、天以外的第五大人类互动领域。 通信保密阶段 --- 计算机安全阶段 --- 信息系统安全 --- 网络空间安…

校园教学气象站是什么

TH-XQ3在当今社会&#xff0c;气象科学的重要性日益凸显。它不仅关系到农业、交通、航空等多个领域的安全&#xff0c;更对人类的生活产生深远影响。因此&#xff0c;许多学校纷纷开设气象学相关课程&#xff0c;帮助学生了解气象知识&#xff0c;培养他们的科学素养。而在这其…

【数据结构:顺序表】

文章目录 线性表顺序表1.1 顺序表结构的定义1.2 初始化顺序表1.3 检查顺序表空间1.4 打印1.5 尾插1.6 头插1.7 尾删1.8 头删1.9 查找1.10 指定位置插入1.11 删除指定位置数据1.12 销毁顺序表 数据结构(Data Structure)是计算机存储、组织数据的方式&#xff0c;指相互之间存在一…

termux 玩法(一)

termux基础 termux基础玩法推荐国光写的手册&#xff1a;Termux 高级终端安装使用配置教程 | 国光 (sqlsec.com) termux安装 个人使用F-Droid安装的termux&#xff1a;Termux | F-Droid - Free and Open Source Android App Repository 基础知识 这些基础知识简单了解一下…

HDFS Federation前世今生

一 背景 熟悉大数据的人应该都知道&#xff0c;HDFS 是一个分布式文件系统&#xff0c;它是基于谷歌的GFS实现的开源系统&#xff0c;设计目的就是提供一个高度容错性和高吞吐量的海量数据存储解决方案。在经典的HDFS架构中有2个NameNode和多个DataNode&#xff0c;如下 从上面…

【C/C++ 02】希尔排序

希尔排序虽然是直接插入排序的升级版本&#xff0c;和插入排序有着相同的特性&#xff0c;即原始数组有序度越高则算法的时间复杂度越低&#xff08;预排序机制&#xff09;&#xff0c;但是是不稳定排序算法。 为了降低算法的时间复杂度&#xff0c;所以我们需要在排序之前尽…

3D效果图加树进去太卡,渲染太慢怎么办?

周末的时候&#xff0c;有个朋友私信来问&#xff1a;3dmax模型加树进去打开时特别的卡&#xff0c;是怎么回事。 不知道有没有朋友遇上这么个情况。 3dmax加树建议就用代理&#xff0c;这样相比于直接加而言&#xff0c;会流畅许多。 在3D效果图中&#xff0c;“树代理”是…

计网Lesson11 - 虚拟机网络环境及socket概述

文章目录 虚拟机的简述socket概述 虚拟机的简述 放张图在这&#xff0c;根本没明白是啥对啥&#xff0c;以后学了Linux再来吧 &#x1f626; socket概述 s o c k e t socket socket 是一种用于应用层的用户态与应用层以下的内核态交互的工具&#xff0c;本意为“插座”。 也就是…

AI新工具(20240130) Code Llama 70B-开源代码生成模型;海螺问问

Code Llama 70B-开源代码生成模型 Code Llama 70B是一个大型语言模型&#xff0c;通过对自然语言指令进行微调&#xff0c;可以生成有用且安全的答案。它提供了三个版本&#xff0c;分别是基础代码模型、专门针对Python的版本&#xff0c;以及针对理解自然语言指令进行微调的版…

电气自动化行业,全面数字化工作流程

电气自动化行业数字化转型所需流程软件&#xff0c;与大家分享如下&#xff1a; D-Hub企业数字化协同平台、SuperHarness数字线束软件、SuperPanel母排设计软件、D-Hub生产管理系统&#xff0c;全面的数字化工作流程&#xff0c;智能降本增效&#xff01; D-Hub D-Hub是一款…

怎么制作出圈的虚拟数字人城市宣传短片?

如今&#xff0c;中国城市面临一个从To B&#xff08;企业客户&#xff09;、To G&#xff08;政府客户&#xff09;到To C&#xff08;一般客户&#xff09;的转变。其中&#xff0c;城市宣传片作为与C端沟通的最佳途径&#xff0c;一个“吸睛”的城市短片&#xff0c;可以有效…

STM32学习笔记(四) —— 位段别名区的使用

STM32F103RCT6有两个位段区 (SRAM 最低1M空间和片内外设存储区最低1M空间)&#xff0c; 这两个区域都有各自的别名区&#xff0c;在别名区中每个字会映射到位段区的一个位&#xff0c;所以在别名区修改一个字相当于修改位段区中对应的一个位 映射公式( 别名区中的字与位段区中的…

软硬兼施:亚信安慧AntDB创造更多可能性

亚信安慧AntDB是一种极具适配能力的数据库系统&#xff0c;它不仅在软件方面拥有出色的适应性&#xff0c;还能与国产硬件紧密配合&#xff0c;实现高效稳定的运行。无论是在上游还是下游领域&#xff0c;亚信安慧AntDB都展现出了卓越的适配程度。 在软件方面&#xff0c;亚信安…

使用ffmpeg madiamtx制作一个rtsp源

有很多人在跑rtsp解码的demo的时候, 苦于找不到一个可以拉流的源, 这里说一个简单的方法. 使用mediamtx, 加ffmpeg加mp4文件方式, 模拟一个rtsp的源. 基本架构就是这样. 在PC上, 这里说的PC可以是远程的服务器, 也可以是你的开发用的windows, 都行. 把mediamtx, 在pc上跑起来 …

如何使用Python+Flask搭建本地Web站点并结合内网穿透公网访问?

文章目录 前言1. 安装部署Flask并制作SayHello问答界面2. 安装Cpolar内网穿透3. 配置Flask的问答界面公网访问地址4. 公网远程访问Flask的问答界面 前言 Flask是一个Python编写的Web微框架&#xff0c;让我们可以使用Python语言快速实现一个网站或Web服务&#xff0c;本期教程…

【数论】【分类讨论】【C++算法】1611使整数变为 0 的最少操作次数

作者推荐 【动态规划】【字符串】【行程码】1531. 压缩字符串 涉及知识点 数论 数学 分类讨论 LeetCoce1611. 使整数变为 0 的最少操作次数 给你一个整数 n&#xff0c;你需要重复执行多次下述操作将其转换为 0 &#xff1a; 翻转 n 的二进制表示中最右侧位&#xff08;第…

多线程c++

目录 1.join和detach区别 2.lock_guard和unique_lock 3.原子操作 4.条件变量condition_variable 5.future 和 promise 1.join和detach区别 ①不使用join和detach #include <iostream> #include <thread> #include <windows.h>using namespace std;v…