Sus estilos son buenos, pero olvida establecer el width: 15% para los encabezados correlacionados. Una tabla no puede reconocer los tamaños de las columnas automáticamente, por lo que debe configurar todas las filas para que tengan el mismo ancho.

Puedes revisar este 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> ); }

¿Quizás usar la función de HTML5 colSpan ko agregar el ancho necesario?

 ... ... 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 colSpan="2">Industry</th> <th colSpan="2">Sponsor</th> <th colSpan="2">Name</th> <th colSpan="1">Compl. Risk</th> <th colSpan="1">Plan Util</th> <th colSpan="1">ROR</th> <th colSpan="1">Expense Ratio</th> <th colSpan="1">Retire Rediness</th> <th colSpan="1">Cohort</th> <th colSpan="1">Overall Grade</th> <th colSpan="1">Industry Grade</th> <th colSpan="1">Bookmark</th> </tr> </thead> <tbody className="table-hover"> {plans.map((el, id) => ( <tr key={el.PlanName + id}> <Tooltip title={el.Industry}> <td colSpan="2" className={classes.cellStyle}> {el.Industry}{" "} </td> </Tooltip> <Tooltip title={el.PlanSponsor}> <td colSpan="2" className={classes.cellStyle}> {el.PlanSponsor} </td> </Tooltip> <Tooltip title={el.PlanName}> <td colSpan="2" className={classes.cellStyle}> {el.PlanName} </td> </Tooltip> <td colSpan="1">{el.OverallComplRisks}</td> <td colSpan="1">{el.OverallPlanUtil}</td> <td colSpan="1">{el.OverallROR}</td> <td colSpan="1">{el.OverallExpenseRatio}</td> <td colSpan="1">{el.OverallRetireReadiness}</td> <td colSpan="1">{el.Cohort}</td> <td colSpan="1">{el.OverallGrade}</td> <td colSpan="1">{el.IndustryGrade}</td> <td colSpan="1">{el.IsBookmarked}</td> </tr> ))} </tbody> </table> </Box> );