HTML text-align tr-CodePudding

Given following simple table structure:

.table tr {
   text-align: center
}

<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
  </tbody>
</table>

It aligns the text of the th elements centrally, but not the text of the td elements.

But if I e.g. try to change the text-color using the same selector, it gets applied to all table elements (th and td).

I was wondering why that is?

CodePudding user response：

You do not have a class called table in your html. Remove the . before table to select the <table>-Element in your HTML.

table tr {
  text-align: center;
}

<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

The .table refers to a class. You don't have that class on your table. By default th's are center aligned and td's are left aligned.

To apply styles to the table in your question you can just style using "table tr { text-align: center }"

Or add to your table.