React表格：实现2行10列，奇数列宽度100px，偶数列平分宽度

使用React构建2行10列表格，奇数列宽度100px，偶数列平分宽度

本示例展示如何使用React构建一个2行10列的表格，并实现以下需求：

奇数列宽度为100px
偶数列宽度平分剩余空间
表格边框为浅黑色

以下代码展示了实现过程：

import React from 'react';

const Table = () => {
  const tableStyle = {
    border: '1px solid #ddd',
    borderCollapse: 'collapse',
  };

  const thOddStyle = {
    backgroundColor: '#f2f2f2',
    width: '100px',
    border: '1px solid #ddd',
    padding: '8px',
    textAlign: 'center',
  };

  const thEvenStyle = {
    backgroundColor: '#f2f2f2',
    width: 'calc(100% / 9)',
    border: '1px solid #ddd',
    padding: '8px',
    textAlign: 'center',
  };

  const tdStyle = {
    border: '1px solid #ddd',
    padding: '8px',
    textAlign: 'center',
  };

  return (
    <table style={tableStyle}>
      <thead>
        <tr>
          <th style={thOddStyle}>Odd</th>
          <th style={thEvenStyle}>Even</th>
          <th style={thEvenStyle}>Even</th>
          <th style={thEvenStyle}>Even</th>
          <th style={thEvenStyle}>Even</th>
          <th style={thEvenStyle}>Even</th>
          <th style={thEvenStyle}>Even</th>
          <th style={thEvenStyle}>Even</th>
          <th style={thEvenStyle}>Even</th>
          <th style={thEvenStyle}>Even</th>
        </tr>
      </thead>
      <tbody>
        {[...Array(10)].map((_, index) => (
          <tr key={index}>
            <td style={tdStyle}>{index + 1}</td>
            <td style={tdStyle}></td>
            <td style={tdStyle}></td>
            <td style={tdStyle}></td>
            <td style={tdStyle}></td>
            <td style={tdStyle}></td>
            <td style={tdStyle}></td>
            <td style={tdStyle}></td>
            <td style={tdStyle}></td>
            <td style={tdStyle}></td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

代码解释：

样式定义： 使用三个不同的样式对象：tableStyle、thOddStyle、thEvenStyle 和 tdStyle。
- tableStyle 定义表格的边框和边框合并样式。
- thOddStyle 定义奇数列的样式，包括背景颜色、宽度、边框、填充和文本对齐。
- thEvenStyle 定义偶数列的样式，包括背景颜色、宽度（使用 calc(100% / 9) 平分剩余空间）、边框、填充和文本对齐。
- tdStyle 定义单元格的边框、填充和文本对齐。
表格渲染： 使用 map 函数生成10个行元素。每行包含一个奇数列单元格和9个偶数列单元格。
单元格填充： 单元格中填充空白，没有显示文本或内容。

总结：

通过使用CSS样式和React组件，我们可以轻松地构建一个满足特定需求的表格。calc() 函数在处理表格布局时非常有用，可以根据需要动态分配宽度。