如何使用css更改表格的样式？

我使用CSS中的表类名来尝试和更改样式，但它没有改变任何东西。我刚刚试着改变桌子的背景颜色和边框，看看它是否能工作

我的CSS文件中使用了数以百万计的其他表格样式，它们可能会覆盖某些内容，我在下面展示了其中的一些内容，但我认为如果我访问类名

.table

，

.slb table

和

.table

，

.slb tbody

，那么它们应该覆盖这些其他样式。HTML表中的

bg color=“red”className=“text white”

可以正常工作

要映射的数组中的值并不重要。如何在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, thead, tfoot, tbody{display:block;}
tr {display:flex; flex-wrap:wrap;}
th , td{flex:1;}

---

很难看出这里到底是什么问题。您能否制作codesendbox repo或类似产品，以便我们能够更清楚地看到问题，并帮助您尝试使用

！重要信息

？我无法进行沙箱和测试！重要的事情没有起作用。谢谢。你能告诉我要键入什么来改变一个组件的背景颜色吗？然后，我可能可以自己解决如何更改其他组件中的其他内容。当您提出问题时，如果要更改背景颜色，则很难确切知道您想要什么：。yourClass{background color:red！important；}这不起作用。每当我执行.table.slb table{background color:green}时，什么都不会发生。每当我试图更改任何内容或访问任何表组件时，都会发生这种情况。或者，如果我只是执行.slb表{background color:green}，它也不起作用。添加！重要也没什么区别。可能在某个地方有javascrip