HTML 表格单元格内边距答案

【问题标题】：HTML table cells paddingHTML 表格单元格内边距
【发布时间】：2020-12-24 17:14:23
【问题描述】：

我有一个表，其中包含第一列的图表。然后它填充常规字符串值。出于某种原因，每个顶部 td 单元格都有一个高度顶部填充。有没有办法可以强制顶部 td 获得不同的顶部填充？什么方法都试过了，没办法控制

这是表格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>
);
};

【问题讨论】：

标签： reactjs html-table

【解决方案1】：

由于我在第一列上使用了 Fusion Chart 图表库，并且我无法强制顶部填充，我决定并排创建两个表格，它就像一个魅力。我相信这是一个比强制 css 更好的解决方案

【讨论】：