如何设置与TreeGrid组件相同的简单HTML表的样式？

要设置与TreeGrid组件相同的简单HTML表的样式，可以按照以下步骤进行：

1. 首先，创建一个HTML表格的基本结构，使用<table>标签包裹表格内容，并使用<tr>和<td>标签定义行和单元格。
2. 为表格添加样式，可以使用CSS来设置表格的外观。可以通过以下方式来实现与TreeGrid组件相似的样式：
   • 设置表格的边框样式：使用border属性来设置表格的边框样式，例如border: 1px solid #ccc;。
   • 设置表头的背景色和字体样式：使用background-color属性来设置表头的背景色，使用color属性来设置字体颜色，例如background-color: #f5f5f5; color: #333;。
   • 设置表格行的交替背景色：使用CSS的伪类选择器:nth-child来选择表格中的奇偶行，并设置不同的背景色，例如tr:nth-child(even) { background-color: #f9f9f9; }。
   • 设置表格单元格的边框样式和内边距：使用border属性来设置单元格的边框样式，使用padding属性来设置单元格的内边距，例如border: 1px solid #ccc; padding: 5px;。

• 根据需要，可以进一步自定义表格的样式，例如调整字体大小、对齐方式、宽度等。

以下是一个示例的HTML代码，展示了如何设置与TreeGrid组件相同的简单HTML表的样式：

<style>
  table {
    border: 1px solid #ccc;
    width: 100%;
    border-collapse: collapse;
  }
  
  th {
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #ccc;
    padding: 5px;
  }
  
  td {
    border: 1px solid #ccc;
    padding: 5px;
  }
  
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
    </tr>
    <!-- 更多行... -->
  </tbody>
</table>

这样，你就可以根据需要设置与TreeGrid组件相同的简单HTML表的样式了。请注意，以上示例中的样式仅为参考，你可以根据实际情况进行调整和扩展。