react使用Table表格调整间距 居中样式，调整Tab样式

已于 2022-08-10 10:26:21 修改
阅读量1.7k 收藏 1
点赞数
文章标签： react.js 前端 javascript
于 2022-08-08 14:42:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q1054007919/article/details/126227388
版权
这篇博客主要探讨了如何对Ant Design框架中的表格和Tab组件进行样式定制。通过修改CSS样式，实现了表格内容居中，调整了单元格内边距，并统一了字体大小。同时，针对Tab组件，设置了活动标签的颜色，改变了鼠标悬停时的颜色，以及调整了 ink-bar 的背景色，增强了用户体验。
摘要由CSDN通过智能技术生成 
 .ant-table-content > table {
        font-size: 16px;
        text-align: center;

        .ant-table-thead > tr > td, .ant-table-tbody > tr > td {
            padding: 9px;
            box-sizing: border-box;
        }

        .ant-table-thead > tr > th, {
            padding: 9px;
            box-sizing: border-box;
        }

        thead > tr > th, {
            text-align: center;
        }
    }
}

设置antd里面Tab样式 

.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #93070A;
}


.ant-tabs-top > .ant-tabs-nav:before {
    border-bottom: 1px solid #D0D0D0;
}

.ant-tabs-tab:hover {
    color: #93070A;
}

.ant-tabs-ink-bar {
    background-color: #93070A;
}
·小新
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 漂亮的table模板
酸酸的博客
10-28 1506
表格页效果： 代码实现： js代码： import React from 'react'; import styles from './styles.less'; import { connect } from 'dva'; import { Input, Button, Modal, DatePicker, Table, Divider, Popconfirm, message } from 'antd'; import { DownOutlined } from '@ant-design/icons'
React实现类似淘宝tab居中切换效果的示例代码
10-15
在React开发中，实现类似淘宝的Tab居中切换效果，主要涉及到组件状态管理、DOM操作以及CSS布局。以下是对这个示例代码的详细解析： 首先，我们有一个`label`对象，它包含了筛选项的数据，包括每个选项的值（`value`...
antd:a-table表头居中，内容居左
qq_67095994的博客
03-21 570
虽然是笨办法，但是能达到效果。
antd组件库中table组件当前行:hover默认样式修改方法；
最新发布
lin_uil的博客
05-12 354
在样式表中找不到 .ant-table-row:hover样式, 修改背景色之后,虽然成功了, 但是会先显示自己设置的颜色, 在恢复到默认样式,;(因为 :hover的默认样式会作用到td上, 我们只对tr进行:hover的样式修改, 渲染到td时,还是会恢复到默认颜色, )找到table的当前行类名, 添加 :hover;
React 中 表格居中对齐
C_SF_C
04-10 2129
<table className={style.centerTable}></table> .centerTable { margin:0 auto; }
Antd修改Table表格行间距
hoaxxcj的博客
04-13 5981
我们在使用Antd的table表格时，可能需要增大每行间距。如果直接在tr或td标签中使用margin或padding不会生效。像下图我把margin-top设置了1000px，页面明显可以看出没生效。 这时候可以给td设置一个白色的有宽度的底部border，如下图红框处： ...
table中怎么设置两行间距
01-15 600
table中设置两行间距方法： css代码实现 <style>table{border-collapse:separate;border-spacing:10px;}</style>[/html] 转载于:https://www.cnblogs.com/telwanggs/p/5132649.html...
react中tab滑动栏
weixin_43709908的博客
10-29 1439
我们在会遇到这种tab特别多的情况，需要点击/滑动选择，这个时候就可以使用这个滑动栏。 tabs代码块： import React, { Component } from "react" import './ModeTabs.less' /** * 模式TAB组件 * * props: * datas = {[{title: '',}, {title: '',}]} * activeTab = {0} * type={0} 默认不传，为默认样式，传1则为第二种样式，选中时字体为下划...
react-table:简单React可排序可搜索表
05-01
React排序搜索表 丰满的 可搜寻的 可排序 寻呼机包括 使用自定义组件渲染特定的TD React> = 16.8.2 react-dom> = 16.8.2 现场演示 现场演示： : 例子 需要更多示例吗？ 查看 包括字体 < link rel =" ...
React-editable-table:从头开始React可编辑表格
04-19
React可编辑的员工表（数据表） 这个项目是使用任何外部模块（例如react-data-grid，react-datasheet等）从头开始创建的。特征在一张桌子中查看所有员工编辑所需的单元格（内联编辑） 将任何行标记为已删除撤消删除...
tabler-icons-react:React React的Tabler图标
04-28
表格图标React 用于的React组件库-一组超过700个免费的MIT开源许可图标。 用法 该软件包可通过npm获得，并可以使用npm或yarn安装： # npm npm install tabler-icons-react # yarn yarn add tabler-icons-react ...
react-ReactTable一个快速轻量级固执己见的React数据表格
08-15
ReactTable 是一个非常受欢迎的开源库，用于在React应用程序中创建功能丰富的数据表格。它以其高性能、灵活性和自定义程度而著称，是开发者在处理数据展示时的首选工具之一。下面将详细介绍ReactTable的核心特性、...
React实现类似淘宝tab居中切换效果
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
06-01 876
效果 DOM布局 const label = { lettersort: false, paramname: "label", paramid: 0, title: "车源列表筛选项", option: [{ value: 1, text: "全部" }, { value: 2, text: "本地求购" }, { value: 3, text: "精准收车" },
vue2 - Antd Table组件的头部单元格 字体加粗， 文字内容居中
LlanyW的专栏
11-18 7793
在当前.vue的style增加穿透antd table的表头样式，然后在使用table的外层设置加上class。所有单元格：在设置第一列时加上对齐属性：align: 'center',单独设置表头：在设置列时，加上方法：customHeaderCell。问题：默认情况下，英文字体加粗，中文字体不加粗，分2种情况，单独设置表头，或者所有单元格都居中。
vue2 Ant-design-vue ＜a-table 实现行多个单元合并，并内容居中显示
LlanyW的专栏
11-24 1583
'textAlign':'center' //对齐方式。最后二行，前4格合并显示：total,与差值。
学习记录513@react使用antd表格实现间隔行背景
教练我想学编程
12-14 900
antd的表格每一行的颜色一样，要想实现更加显眼的样式，可奇数行是一个背景色，偶数行是另外一个背景色，antd文档没有写的很清楚，这里将其实现一下，注意我用的是函数式组件。 定义样式 创建index.css文件 .oddRow { background: #ffffff } .evenRow { background: #fafafa } 使用样式 只列举了关键代码 import "./index.css"; export default () => { //奇偶.
antd table分页居中显示（react）
MYG_G
09-17 2081
在最新版的antd中，.ant-table-pagination ** 是flex，.ant-table-pagination-right**设置的 justify-content: flex-end，所以分页默认在右边展示，如下： 我们想要分页居中，首先要把flex给成display: block; 然后在给 .ant-table-pagination-right设置居中 text-align: center; 上代码： .center_table{ :global { .ant-tabl
【vue】vue使用ant中的a-tabs组件如何居中对齐
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
12-13 3808
vue使用ant中的a-tabs组件如何居中对齐
【AntD】Antd Table组件的头部单元格水平居中，单元格居左：
SunPeng的博客
07-14 2015
【AntD】Antd Table组件的头部单元格水平居中，单元格居左：
react实现table表格导出excel表格功能
05-31
可以使用第三方库 `react-table-to-excel` 来实现表格导出功能。 首先，安装该库： ``` npm install react-table-to-excel ``` 然后，在你的组件中引入它： ```jsx import ReactTableToExcel from "react-table-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值