This is the CSS for the antd style I'm using
style.css
.ant-table-tbody > tr > td, .ant-table-thead > tr > th
{
padding:4px;
}
tr:nth-child(odd){
background: #f1e6ff;
}
tr:nth-child(even){
background: white;
}
thead[class*="ant-table-thead"] th{
background-color:#000 !important;
color: white;
font-weight: bold;
border-color: #000;
text-align: center;
}
.table_btn
{
margin:0 !important;
}
.ant-btn
{
margin:0;
}
.ant-table-tbody > tr:hover > td {
color: #fff;
}
index.less
@import "callout";
@import 'e-commerce';
@import "pricing-tables";
@import "login";
@import "dashboard";
@import "error";
@import "editor";
@import "testimonials";
tr:nth-child(odd){
background:inherit !important;
}
.ant-modal-content {
.ant-modal-close{
color: #fff !important;
}
.ant-modal-header {
background-color: #000000;
.ant-modal-title {
color: #fff !important;
}
}
}
.table-wrapper {
.ant-btn {
padding: 0 10px;
height: 30px;
font-size: 13px;
> .anticon {
+ span {
margin-left: 5px;
}
}
&.ant-btn-success {
color: #3d8918;
border-color: #d9d9d9;
&:hover {
background-color:#3d8918;
color: #fff;
}
}
&.ant-btn-danger {
color: #c70d17;
background-color:#fff;
&:hover{
background-color:#c70d17;
color: #fff;
}
}
}
.actions {
text-align: right;
.ant-input {
border-radius: 2px;
padding:0 10px;
font-size: 13px;
height: 30px;
}
}
.table-layout {
.ant-table-small{
> .ant-table-content{
> .ant-table-body {
margin: 0 !important;
> table {
> .ant-table-tbody{
> tr{
> td{
padding: 2px 8px !important;
font-size: 13px !important;
text-align:center;
min-width: 80px;
.ant-btn {
width:100px;
}
}
}
}
}
}
}
index.js
<Table
className="table-layout"
columns={this.state.columns}
dataSource={filteredData}
rowClassName='data-row'
bordered={true}
size={"small"}
onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }
onRowClick={(record, index, event) => this.handleRowClick(record)}
loading={this.state.loading}
pagination={{ pageSize: 14 }}
/>
This is how Table is used in the index page. style.css and index.less are the pages for CSS.
Can anybody help me to write one CSS in this page for making one row green color ? I want to make one row green based on condition. I need the CSS I need to call the CSS in the page where code is
I found two ways to do this as of now:
One way is to use rowClassName
prop of Table:
.table-row-light {
background-color: #ffffff;
}
.table-row-dark {
background-color: #fbfbfb;
}
<Table
rowClassName={(record, index) => index % 2 === 0 ? 'table-row-light' : 'table-row-dark'}
columns={columns}
dataSource={dataSource}
loading={loading}
/>
Second way is to use plain CSS
.table-striped-rows tr:nth-child(2n) td {
background-color: #fbfbfb;
}
.table-striped-rows thead {
background-color: #f1f1f1;
}
<Table
className="table-striped-rows"
columns={columns}
dataSource={dataSource}
loading={loading}
/>
Note that rowClassName works only for rows, so for CSS on table headers we can only use plain CSS like above.