css - 如何使用 css 更改表格的样式?
问题描述
我正在使用 CSS 中的表类名称来尝试更改样式,但它并没有改变任何东西。我刚刚尝试更改表格的背景颜色和边框以查看它是否有效。
我的 CSS 文件中使用了数以百万计的其他表格样式,它们可能会覆盖一些东西,其中一些我在下面显示,但我认为如果我访问类名.table
,.slb-table
和.table
,.slb-tbody
那么它们应该覆盖这些其他样式。bg-color="red" className="text-white"
HTML 表中的 有效。
被映射的数组中的值并不重要。如何在 CSS 中设置表格组件的样式?
我的反应组件:
tableData = () => {
return this.props.sbranch.map((row, row_key) => {
return (
<tr class="slb-tr" key={`row-${row_key}`}>
{this.tableHeader().map((value, key) => {
if (value === 'invoice_val' || value === 'invoice_val_net' || value === 'profit_margin_val') {
return (
<td scope="col" className="align-middle" key={`data-${key}`}>{`£ ${row[value]}`}</td>
)
} else if (value === 'profit_margin_percent' || value === 'return_rate') {
return (
<td scope="col" className="align-middle" key={`data-${key}`}>{`${row[value]} %`}</td>
)
} else {
return (
<td scope="col" className="align-middle" key={`data-${key}`}>{row[value]}</td>
)
}
})}
</tr>
)
})
}
render() {
return (
<table className="slb-table">
<thead class="slb-thead">
<tr bgcolor="red" className="text-white" >
{this.tableHeader().map((name, key) => (
<th scope="col" className="align-middle"
key={name}>{name}</th>
))}
</tr>
</thead>
<tbody className="slb-tbody">
{this.tableData()}
</tbody>
</table>
)
}
我的 CSS:
.table .slb-table{
background-color: #0004ff;
border: black 10px;
}
.table .slb-table > .slb-tbody{
background-color: #0004ff;
border: black 10px;
}
.table {
width: 100%;
margin-bottom: 1rem;
background-color: transparent;
}
.table th,
.table td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
.table thead th {
vertical-align: bottom;
border-bottom: 2px solid #dee2e6;
}
.table tbody + tbody {
border-top: 2px solid #dee2e6;
}
.table .table {
background-color: #FFFFFF;
}
解决方案
你可以用css改变一切
举个例子
table, thead, tfoot, tbody{display:block;}
tr {display:flex; flex-wrap:wrap;}
th , td{flex:1;}