Antd给表格一个斜线分隔（通过css改变）

react 代码：

const [columns,setColums] = useState([//   主要代码title: <div style={{ "position": "relative" }}><div style={{ "text-align": "right" }}>参数</div><div style={{ "text-align": "left" }}>变量</div><div style={{ "content": "", "position": "absolute", "width": "1px", "height": "140px", "top": "-48px", "left": "42px", "backgroundColor": "#1A3A50", "display": "block", "transform": "rotate(-57deg)" }}></div></div>,dataIndex: "indexName",key: "indexName",width: "9%"])

发一个完整的案例：

vue antd 项目代码：
虽然框架不一样，但是实现方式是一样的。

<a-tab-pane key="2" tab="收费公示" force-render><div class="shoufei"><p style="margin-bottom:20px">公示时间：{{ detailInfo.pubStartdate }}至{{detailInfo.pubEnddate}}</p><!-- 表格 --><div id="tableID"><a-tablebordered:data-source="dataSource":columns="columns"></a-table></div></div></a-tab-pane>

data(){return{columns: [{title: <Tooltip title="月份">月份</Tooltip>,dataIndex: "mouth",align: "center",width: "20%"//   scopedSlots: { customRender: "name" }},{width: "20%",children: [{dataIndex: "yjje",align: "center"},{align: "center",dataIndex: "sjje"}],title: (<divstyle={{position: "relative"}}><div style={{ "margin-left": "-200px" }}>应缴金额</div><div style={{ "margin-left": "200px" }}>实缴金额</div><divstyle={{content: "",position: "absolute",width: " 1px",height: "320px",top: "-139px",left: "128px",backgroundColor: "#ded9d9",display: "block",transform: "rotate(77deg)"}}></div></div>)},// {//   title: "实缴金额",//   dataIndex: "sjje",//   align: "center"// },{//   title: "应缴人数",children: [{dataIndex: "yjrs",align: "center"},{dataIndex: "sjrs",align: "center"}],width: "20%",title: (<divstyle={{position: "relative"}}><div style={{ "margin-left": "-200px" }}>应缴人数</div><div style={{ "margin-left": "200px" }}>实缴人数</div><divstyle={{content: "",position: "absolute",width: " 1px",height: "320px",top: "-139px",left: "128px",backgroundColor: "#ded9d9",display: "block",transform: "rotate(77deg)"}}></div></div>)//   align: "center"},// {//   title: "实缴人数",//   dataIndex: "sjrs",//   align: "center"// },{title: <Tooltip title="已上交金额">已上交金额</Tooltip>,dataIndex: "ysjje",align: "center",width: "20%"}],}
}

实现方式：
写一个空div，设置长200px，高1px。再通过css旋转 transform: rotate(77deg)。然后定位上去，最好是给这个空的div加一个父盒子，利用子绝父相。
核心代码

transform: rotate(77deg);//旋转
position: absolute;//定位
// 旋转角度和定位距离根据实际情况调...

Antd给表格一个斜线分隔（通过css改变）相关推荐

Antd给表格一个斜线分隔
代码: const [columns,setColums] = useState([// 主要代码title: <div style={{ "position": " ...
Vue ElementUI table给表格一个斜线分隔线
效果: 实现: 通过改css样式实现 1.去掉第一个单元格的下边框/ 2.第一列第一个单元格和第二个单元格的伪元素设置绝对定位,宽度设成1px,高度根据自己表格调整 3.通过旋转两个单元格伪元素,并设 ...
antd table设置表格一个单元格的字体颜色_alireacttable：高性能 React 表格组件
点击上方蓝字关注我们简介在前端开发中,表格一直都是最复杂的组件之一.表格不仅要支持丰富的操作(排序.过滤.搜索.分页.自定义列等),还要有非常好的性能以展示大量数据.很多组件库(例如 fusion ...
css表格表头对角线,用div+css模拟类excel表格对角线（斜线）
我们先看html代码吧用div+css模拟类excel表格对角线(斜线) 科目姓名数学语文张三 92 62 李四 91 67 第一种写法 css如下 * { padding: 0; marg ...
antd table设置表格一个单元格的字体颜色_开源 UI 库中，唯一同时实现了大表格虚拟化和树表格的 Table 组件
背景有这样一个需求,一位 React Suite (以下简称 rsuite)的用户,他需要一个 Table 组件能够像 Jira Portfolio 一样,支持树形数据,同时需要支持大数据渲染. 截 ...
表格单元格中的CSS文本溢出？
本文翻译自:CSS text-overflow in a table cell? I want to use CSS text-overflow in a table cell, such that ...
Excel单元格斜线分割线怎样插入？干货分享！如何将斜线分隔线加入单元格？
对于excel表格文件我们大家平时记录一些信息.数据经常会用的到,但是一些特殊的符号,斜线分割线应该怎样插入呢?下面小编分享给大家这一个小方法. 首先我们打开excel表格软件,进入需要编辑的表格当中 ...
antd中表格的字段设置成掩码
如上图所示,是一个利用antd制作的一个表格,现在讲微信里面的字段设置成掩码格式. 代码: const columns = [{title: '用户编号',dataIndex: 'originalId ...
python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...

Antd给表格一个斜线分隔（通过css改变）

Antd给表格一个斜线分隔（通过css改变）相关推荐

最新文章

热门文章