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

Question

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

在我的 CSS 文件中使用了数以百万计的其他表格样式，它们可能会覆盖一些东西，其中一些我在下面显示，但我想如果我访问类名 .table、.slb-table 和 @987654323 @, .slb-tbody 那么他们应该覆盖这些其他样式。 HTML 表中的bg-color="red" className="text-white" 有效。

被映射的数组中的值并不重要。如何在 CSS 中设置表格组件的样式？

我的 React 组件：

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

Answer 1

你可以用 css 改变一切

例如

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