Using the map function to display fetched device data, but struggling to create a striped color table. I want to alternate the background color of the tbody tag in stripes, using Bootstrap.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
https://i.sstatic.net/RWsfT.png
React.js
<table className="table table-striped table-bordered">
<thead className="table_thead ">
<tr className="table_font_color">
<th scope="col">Device Name</th>
<th scope="col">Type</th>
<th scope="col">Room</th>
</tr>
</thead>
{entities.map((entity, i) => (
<tbody>
<tr className="table_font_color">
<th scope="row">
<Icon entityKey={entity.key} type={entity.type} state={entity.state} entityID={entity.entity_id} objectID={entity.object_id} />
<p className="">{entity.entity_id}</p>
</th>
<td className="align-middle">
{entity.key === "camera" && <div>Smart Camera</div>}
{entity.key === "cover" && <div>Garage</div>}
{entity.key === "climate" && <div>Smart Themostat</div>}
{entity.key === "lock" && <div>Smart Lock</div>}
{entity.key === "light" && <div>Smart Light</div>}
{entity.key === "sensor" && <div>Sensor</div>}
{entity.key === "switch" && <div>Smart Plug</div>}
</td>
<td className="align-middle table_rightside">
{entity.key === "switch" && <button className="btn btn-primary button_table_rightside">Unassigned</button>}
{entity.key === "sensor" && <button className="btn btn-primary button_table_rightside">Unassigned</button>}
{entity.key === "light" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
{entity.key === "camera" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
{entity.key === "climate" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
{entity.key === "cover" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
{entity.key === "lock" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
</td>
</tr>
</tbody>
))};
</table>
CSS
.table_thead {
background-color: #152D58 !important;
}
.table-bordered {
border: none !important;
}
.table-striped > tbody > tr:nth-child(0) > td, .table-striped > tbody > tr:nth-child(0) > th {
background-color: #152D58 !important;
}
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: #1E3E75 !important;
}
.table-striped > tbody > tr:nth-child(2n) > td, .table-striped > tbody > tr:nth-child(2n) > th {
background-color: #152D58 !important;
}
table.table-bordered > thead > tr > th{
border:3px solid #022055 !important;
}
.table-bordered td {
border:3px solid #022055 !important;
}
.table-bordered th {
border:3px solid #022055 !important;
}
.table_font_color {
color: white !important;
}
Added photo https://i.sstatic.net/iYgGq.png