CCS Multiple Column Table Alignment

Question

I am very new to CSS but trying to format alignment in a HTML Table that contains (3) columns (each column with a header). I want the first column aligned center, the 2nd left and the third right.

Table {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eeeeee;
  border-collapse: collapse;
  width: 100%;
  }
Table td,
  table th {
  font-size: 10px;
  border: 1px solid #ddd;
  padding: 3px 3px;
  }
Table th {
  font-weight: bold;
  padding-top: 6px;
  padding-bottom: 6px;
  background-color: #00b0f0;
  color: white;
  }
  /* first tr and then first th (Column 1)*/
table tr: first-child th: first-child{
  text-align: center;
  }
  /* all cells under the first column */
table tr td: first-child {
  text-align: center;
  }
  /* first element of the second column (Column 2) */
table tr: first-child th: nth-child(2) {
  text-align: left;
  }
  /* all cells under the second column */
table tr td: nth-child(2) {
  text-align: left;
  }
  /* first element of the third column (Column 3) */
table tr: first-child th: nth-child(3) {
  text-align: right;
  }
  /* all cells under the third column */
table tr td: nth-child(3) {
  text-align: right;
  }

Any assistance would be appreciated.

Don't put a space between : and first-child in : first-child. Likewise for nth-child. — Alohci
– Alohci, Commented May 16 at 13:56
bad CSS syntax see Alohci comment. It must be table tr:first-child th:first-child {... etc. — Mister Jojo
– Mister Jojo, Commented May 16 at 14:14
Changed to the following (example) with no change... } /* first tr and then first th (Column 1) / table tr:first-child th:first-child { text-align: center; } / all cells under the first column */ table tr td:first-child { text-align: center; } — RJF
– RJF, Commented May 16 at 14:53
I'm not entirely clear exactly what you are trying to achieve because for example of this comment: "first element of the third column (Column 3)" - are you wanting the first cell in the 3rd column to be formatted differently from all the other cells in the 3rd column? — A Haworth
– A Haworth, Commented May 16 at 15:06

A Haworth · Accepted Answer · 2025-05-16 15:33:26Z

0

As both the th and td are to have the same alignment in any given column, you can simply select the relevant child using * and :nth-child.

Here's a trivial example.

table {
  width: 100%;
  max-width: 600px;
}

tr>*:nth-child(1) {
  text-align: center;
}

tr>*:nth-child(2) {
  text-align: left;
}

tr>*:nth-child(3) {
  text-align: right;
}

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
    </tr>
  </tbody>
</table>

Note: the table width has been specified simply for this demo to make it more obvious that the alignment is center, left, right as required rather than have the columns bunched up.

answered May 16 at 15:33

A Haworth

37.6k4 gold badges17 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mister Jojo · Accepted Answer · 2025-05-16 19:44:08Z

0

Here is a simple example of how this can be done.

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

th,
td {
  padding: 12px;
  border: 1px solid #ddd;
}

th {
  background-color: #f4f4f4;
  text-align: center;
}

td:first-child {
  text-align: center;
}

td:nth-child(2) {
  text-align: left;
}

td:nth-child(3) {
  text-align: right;
}

<table>
  <thead>
    <tr>
      <th>Center Aligned</th>
      <th>Left Aligned</th>
      <th>Right Aligned</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>A</td>
      <td>$500.00</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
      <td>$750.00</td>
    </tr>
    <tr>
      <td>3</td>
      <td>C</td>
      <td>$300.00</td>
    </tr>
  </tbody>
</table>

edited May 16 at 19:44

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

answered May 16 at 14:19

DmitriyKulagin

113 bronze badges

Collectives™ on Stack Overflow

CCS Multiple Column Table Alignment

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related