CODEWITHSUNDEEP
htmlcsshtml-table
shellwe
shellwe

Reputation: 115

Centering a column in a table

I am trying to center just certain columns in a table but I am having issues. I know in the past you would just simply apply inline styles to each TD but there has to be a better way.

Here is a simple example:

.centerText{
	text-align:center;
}
    <table border="1">
      <col>
      <col class="centerText">
      <thead>
        <tr>
          <th>heading1</th>
          <th>heading2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
        </tr>
      </tbody>
    </table>

With that class I am trying to center the text inside. I know applying css to the col will work for changing background color for the column and text color and such, but I am not sure how I would use it to center a column. I am assuming because I need to center the contents of the td and this is probably just centering the TD element itself; which is already 100 percent. I understand I can just say apply the css to the 5th TD in this TR but that seems fragile.

Also, bonus points if you can show me how to change the width of a column this way. I used the width attribute for col but that is deprecated in html 5 (even though it is still currently supported.

Upvotes: 0

Views: 149

Answers (4)

Johannes
Johannes

Reputation: 67738

It's not completely clear what you want, but if you want to center the contents of a certain column, you can just use this CSS rule:

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

In this example it applies to the second column, but you could define that for any column. It works since the td are always children of a tr, so you can use the nth-child selector.

td:nth-child(2) {
  text-align: center;
}
<table border="1">
  <col>
  <col class="centerText">
  <thead>
    <tr>
      <th>heading1</th>
      <th>heading2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Ankit Singh
Ankit Singh

Reputation: 1477

If you want to align your all td content to the center

add the centerText class to your table

<table class="centerText" border="1">

Upvotes: 0

Marco Salerno
Marco Salerno

Reputation: 5203

Done, your class wasn't used anywhere

tr td:nth-child(2) {
	text-align:center;
}
<table border="1">
  <thead>
    <tr>
      <th>heading1</th>
      <th>heading2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td >2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

I removed:

  <col>
  <col class="centerText">

and

.centerText{
    text-align:center;
}

Because col doesn't mean anything and you didn't close the tags.

Upvotes: 1

Bad Hombre
Bad Hombre

Reputation: 594

CSS

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center
}

Upvotes: 0

Related Questions