Trying to add background color to header only-CodePudding

Im trying to add a color to my header only, but instead it'll add that color to the entire table.

 <div className="container" style={buttonStyle}>
                <text id={i} onClick={this.ChangeVisibility} style={{cursor:"pointer"}}>{} {this.showImage(i)}</text>
                <table style = {tableStyle} bgcolor ='#CCE4FF'  id={i   "table"} className="table table-borderless">
                    <thead>
                        <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>

CodePudding user response：

you can set the the bgcolor yo each th tag

<th bgcolor="green">

CodePudding user response：

You Can set particular th tag

you can change color via css th{ background:cyan; }

CodePudding user response：

I can't be sure here because your code is incomplete. E.g. you don't show where tableStyle and other variables are defined. However, it's possible to see that when you apply style to table tag it applies for the whole table.

To overcome this you could either use tableStyle in the thead as it is shown below:

<div className="container" style={buttonStyle}>
  <text id={i} onClick={this.ChangeVisibility} style={{cursor:"pointer"}}>
    {} {this.showImage(i)}
  </text>
  <table bgcolor ='#CCE4FF'  id={i   "table"} className="table table-borderless">
    <thead style={tableStyle}>
      <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>

Or if you want two different styles then you can define a header specific style e.g. tableHeadStyle and apply it to thead:

<div className="container" style={buttonStyle}>
  <text id={i} onClick={this.ChangeVisibility} style={{cursor:"pointer"}}>{} {this.showImage(i)}
  </text>
  <table style={tableStyle} bgcolor ='#CCE4FF'  id={i   "table"} className="table table-borderless">
    <thead >
    ...