如何在Vue.js中使用CSS对齐表标题和内容？

<template>
  <table class="my-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>
      <!-- 其他行 -->
    </tbody>
  </table>
</template>

<style>
.my-table th {
  text-align: center; /* 设置标题居中对齐 */
}

.my-table td {
  text-align: left; /* 设置内容左对齐 */
}
</style>