如何在CSS中使用不同的表格样式

<table style="border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid black; padding: 8px;">Header 1</th>
    <th style="border: 1px solid black; padding: 8px;">Header 2</th>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 8px;">Data 1</td>
    <td style="border: 1px solid black; padding: 8px;">Data 2</td>
  </tr>
</table>

<style>
  #my-table {
    border-collapse: collapse;
  }
  .my-header {
    border: 1px solid black;
    padding: 8px;
  }
  .my-data {
    border: 1px solid black;
    padding: 8px;
  }
</style>

<table id="my-table">
  <tr>
    <th class="my-header">Header 1</th>
    <th class="my-header">Header 2</th>
  </tr>
  <tr>
    <td class="my-data">Data 1</td>
    <td class="my-data">Data 2</td>
  </tr>
</table>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<table class="table table-bordered">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>