Great job on the styles! Just a reminder to set width: 15% for the correlated headers. Tables need consistent row widths, so make sure all rows have the same width.
For more details, check out this sandbox
import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Box, TextField, Button, Tooltip } from "@material-ui/core";
import plans from "./data";
const useStyles = makeStyles((theme) => ({
cellStyle: {
fontStyle: "bold",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow: "hidden",
textAlign: "center",
width: "15%"
},
headerStyle: {
width: "15%"
}
}));
export default function App() {
const classes = useStyles();
return (
<Box>
<table
className="table table-striped table-bordered table-sm table-hover"
style={{ width: "100%", tableLayout: "fixed" }}
>
<thead className="thead-dark">
<tr style={{ textAlign: "center" }}>
<th className={classes.headerStyle}>Industry</th>
<th className={classes.headerStyle}>Sponsor</th>
<th className={classes.headerStyle}>Name</th>
<th>Compl. Risk</th>
<th>Plan Util</th>
<th>ROR</th>
<th>Expense Ratio</th>
<th>Retire Rediness</th>
<th>Cohort</th>
<th>Overall Grade</th>
<th>Industry Grade</th>
<th>Bookmark</th>
</tr>
</thead>
<tbody className="table-hover">
{plans.map((el, id) => (
<tr key={el.PlanName + id}>
<Tooltip title={el.Industry}>
<td className={classes.cellStyle}>{el.Industry} </td>
</Tooltip>
<Tooltip title={el.PlanSponsor}>
<td className={classes.cellStyle}>{el.PlanSponsor}</td>
</Tooltip>
<Tooltip title={el.PlanName}>
<td className={classes.cellStyle}>{el.PlanName}</td>
</Tooltip>
<td>{el.OverallComplRisks}</td>
<td>{el.OverallPlanUtil}</td>
<td>{el.OverallROR}</td>
<td>{el.OverallExpenseRatio}</td>
<td>{el.OverallRetireReadiness}</td>
<td>{el.Cohort}</td>
<td>{el.OverallGrade}</td>
<td>{el.IndustryGrade}</td>
<td>{el.IsBookmarked}</td>
</tr>
))}
</tbody>
</table>
</Box>
);
}