I am populating a table in a react application using the React Table Component. The data is being mapped into the table via three different data sets. The issue I am having is getting the table to format properly. Specifically, getting the columns to line up. I should have 2 rows and 4 lined up columns. Each cell has 4 lines of text (not 4 rows).

Here is my render() and return statements showing what I have done. I have properly exported the component at the end of the code.

render() {
        const { t } = this.props;
        const tableData = this.state.tableData;
       
        

        return (
            tableData ? (
                <div>

                    <div className="title">Bike Sales</div>

                    <hr></hr>
                    <Accordion defaultActiveKey={['0']}>
                        {this.state.product.map((item) =>
                            <Accordion.Item eventKey={item.id}>
                                <Accordion.Header>{item.name}</Accordion.Header>
                                <Accordion.Body>
                                    <div className="table-container">
                                        { //generate table rows
                                            <Table striped bordered hover>
                                                <tbody>
                                                    <tr>
                                                        <th></th> {/*space holder to shift dates so they line up with cell content*/}
                                                        {this.state.dats.map((day) => (
                                                            <th> {day}    </th>
                                                        ))}
                                                    </tr>
                                                    {
                                                        this.state.size.map((siz) => {
                                                            return <div>
                                                                <th>{siz}<br></[![enter image description here](https://i.sstatic.net/ZSXzP1mS.png)](https://i.sstatic.net/ZSXzP1mS.png)br>Units<br></br>Unit Change<br></br>% Change<br></br><br></br></th>
                                                                {this.state.dt.map((label) => {
                                                                    return <>
                                                                        {label.product == item.name && label.size == siz ? (
                                                                            <>
                                                                                <td><br></br>{label.ds}     {label.is}    {label.ms}  <br></br>
                                                                                    {label.dPtChg}    {label.iPtChg}    {label.msPtChg} <br></br>
                                                                                    {label.dPctChg}     {label.iPctChg}     {label.msPctChg}</td>
                                                                            </>[![enter image description here](https://i.sstatic.net/mLM03QVD.png)](https://i.sstatic.net/mLM03QVD.png)
                                                                        ) : (null)
                                                                        }
                                                                    </>;
                                                                })}

                                                            </div>
                                                        })
                                                    }
                                                </tbody>
                                            </Table>
                                        }
                                    </div>
                                </Accordion.Body>
                            </Accordion.Item>
                        )}
                    </Accordion>

                </div>

            ) : (null)
        )
    }
}

And here is my CSS.

.table-container{
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

table tr td {
    text-align: right;
}

I have attached an image of the output I am getting. I have not applied much styling. Since I am using React Bootstrap which has been installed properly, my expectation is that the rows would be stripped and that the columns would line up properly at a minimum.

What am I doing wrong to explain why the columns are not lining up and the stripped shading not showing and more importantly, how do I fix it?