React项目中如何仅为表格表头添加背景色？当前整表被染色

问题出在你把bgcolor='#CCE4FF'直接加在了<table>标签上，这个属性会对整个表格生效，所以tbody也被加上了背景色。把样式移到<thead>或者里面的<tr>上就能只给表头设置背景色，下面是几种可行的修改方式：

方式一：给<thead>添加bgcolor属性 #

<div className="container" style={buttonStyle}>
    <text id={i} onClick={this.ChangeVisibility} style={{cursor:"pointer"}}>{} {this.showImage(i)}</text>
    <table style={tableStyle} id={i + "table"} className="table table-borderless">
        <thead bgcolor='#CCE4FF'>
            <tr>
                <th>Column Headers</th>
                <th>Incedo Pay Attribute</th>
                <th>Data Type</th>
                <th>Min Length</th>
                <th>Max Length</th>
                <th>Is Mandatory ?</th>
            </tr>
        </thead>
        <tbody className="table-group-divider">
            {tmp}
        </tbody>
    </table>
</div>

方式二：用React内联样式给<tr>设置背景色（推荐） #

这种写法更符合React的风格，也更灵活：

<div className="container" style={buttonStyle}>
    <text id={i} onClick={this.ChangeVisibility} style={{cursor:"pointer"}}>{} {this.showImage(i)}</text>
    <table style={tableStyle} id={i + "table"} className="table table-borderless">
        <thead>
            <tr style={{backgroundColor: '#CCE4FF'}}>
                <th>Column Headers</th>
                <th>Incedo Pay Attribute</th>
                <th>Data Type</th>
                <th>Min Length</th>
                <th>Max Length</th>
                <th>Is Mandatory ?</th>
            </tr>
        </thead>
        <tbody className="table-group-divider">
            {tmp}
        </tbody>
    </table>
</div>

方式三：用CSS类定义表头样式 #

如果需要复用这个样式，建议单独定义CSS类：

.table-head-bg {
    background-color: #CCE4FF;
}

然后在组件中引用：

<div className="container" style={buttonStyle}>
    <text id={i} onClick={this.ChangeVisibility} style={{cursor:"pointer"}}>{} {this.showImage(i)}</text>
    <table style={tableStyle} id={i + "table"} className="table table-borderless">
        <thead className="table-head-bg">
            <tr>
                <th>Column Headers</th>
                <th>Incedo Pay Attribute</th>
                <th>Data Type</th>
                <th>Min Length</th>
                <th>Max Length</th>
                <th>Is Mandatory ?</th>
            </tr>
        </thead>
        <tbody className="table-group-divider">
            {tmp}
        </tbody>
    </table>
</div>

内容的提问来源于stack exchange，提问作者tarik