Antd给表格一个斜线分隔(通过css改变)

简介: Antd给表格一个斜线分隔(通过css改变)

image.png

代码:

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%"
  ])

`

发一个完整的案例:

image.png

vue项目代码:

<a-tab-pane key="2" tab="收费公示" force-render>
          <div class="shoufei" v-show="gongshiShow">
            <h2>中共温州银行金融科技部一支部委员会党费公示</h2>
            <p style="margin-bottom:20px">
              公示时间:{{ detailInfo.pubStartdate }}至{{detailInfo.pubEnddate}}
            </p>
            <!-- 表格 -->
            <div id="tableID">
              <a-table
                bordered
                :data-source="dataSource"
                :columns="columns"
              ></a-table>
            </div>
          </div>
          <div v-show="!gongshiShow" id="gongshi">
            <h3>党费未公示</h3>
          </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: (
            <div
              style={{
                position: "relative"
              }}
            >
              <div style={{ "margin-left": "-200px" }}>应缴金额</div>
              <div style={{ "margin-left": "200px" }}>实缴金额</div>
              <div
                style={{
                  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: (
            <div
              style={{
                position: "relative"
              }}
            >
              <div style={{ "margin-left": "-200px" }}>应缴人数</div>
              <div style={{ "margin-left": "200px" }}>实缴人数</div>
              <div
                style={{
                  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%"
        }
      ],
  }
}

主要是通过style中旋转div实现的

相关文章
|
10月前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
89 0
|
前端开发
CSS中给表格的第一列及最后一列设置不同的样式
CSS中给表格的第一列及最后一列设置不同的样式
115 0
|
Web App开发 前端开发 算法
css表格和表单
css表格和表单
|
4月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
150 12
|
8月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
315 0
|
7月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
9月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
9月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
79 1
|
9月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
115 1