Question

我正在CSS中使用表类名称来尝试更改样式，并且没有任何更改。我刚刚尝试更改表格的背景颜色和边框以查看其是否有效。

我的CSS文件中使用了数百万种其他的表样式，它们可能是最主要的东西，我在下面显示了其中的一些样式，但是我想如果我访问类名.table，{{1} }和.slb-table，.table，则它们应覆盖其他样式。 HTML表中的.slb-tbody有效。

要映射的数组中的值并不重要。如何在CSS中为表格的组成部分设置样式？

我的React组件：

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>
  )
}

Answer 1

您可以使用CSS更改所有内容

例如

table, thead, tfoot, tbody{display:block;}
tr {display:flex; flex-wrap:wrap;}
th , td{flex:1;}

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

1 个答案: