reactjs - HTML table cells padding

Question

I have a table that contains a chart on the first column. Then it fills with regular string values. For some reason, each top td cell gets a heigh top padding. Is there a way I can force the top td to gets different top padding? I tried everything, and I can't find a way to control it

This is the table html:

const renderTable = () => {
return (
  <>
    {tables.data.map((table, index) => (
      <div className={classes.tablesWrapper}>
        <table key={index}>
          {renderTableHeaders(table)}
          {renderTableBody(table.table, table.data)}
        </table>
      </div>
    ))}
  </>
);
};

const renderTableHeaders = (table) => {
return (
  <thead>
    <tr>
      <th>{table.header}</th>
      {headers.map((head, index) => (
        <th key={index}>{head}</th>
      ))}
    </tr>
  </thead>
);
};

 const renderTableBody = (rows, chart) => {
return (
  <tbody>
    {rows.map((row, i) => (
      <tr key={i}>
        {i === 0 && (
          <td rowSpan={rows.length}>
            <BarChartFusion chartConfigs={chart} height={"200"} />
          </td>
        )}
        {row.map((r, y) => (
          <td
            key={y}
            className={classes[handleClassIndicators(r.indicator)]}
          >
            {r.title}
          </td>
        ))}
      </tr>
    ))}
  </tbody>
);
};

Answer 1

Since I'm using Fusion Chart charts library on the first column and I couldn't force the top padding I decided to create two tables, side by side and it worked like a charm. I believe this is a better solution than forcing css