Question 383250 in Html Question posted in
Some basic documentation can be found here.

Html – CSS: Center table column, but align content to the left inside a block in the column

I am trying to align content in a table column, across multiple cells and rows, so that they are centered blocks and then left aligned inside that block.

I have found how to do it inside a div, but is there a way to do it across multiple row and columns in a table?

Here is how to do it in a div.
https://stackoverflow.com/a/31643221

First image is normal center, second is centered inside of a block.

Normal Center

Center inside block

Tags:

2

Answers


  1. 0

    To center a table column while aligning the content to the left inside the block in the column, you can use CSS to target the element within the specific column and apply appropriate styling.

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

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

.center-column {
  text-align: center; /* Center the content in the column */
}

.center-column > div {
  display: inline-block;
  text-align: left; /* Align the content inside the block to the left */
}
    <table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="center-column">Centered Content</td>
      <td>Left-aligned Content</td>
      <td>Left-aligned Content</td>
    </tr>
    <!-- Add more rows as needed -->
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    add more rows to the table to see if the alignment works consistently across multiple rows:

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

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

.center-column {
  text-align: center;
}

.left-align-content {
  display: inline-block;
  text-align: left;
}
    <table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="center-column">
        <div class="left-align-content">
          Centered Content<br>
          Line 2 of Content
        </div>
      </td>
      <td>Left-aligned Content</td>
      <td>Left-aligned Content</td>
    </tr>
    <tr>
      <td class="center-column">
        <div class="left-align-content">
          Another Centered Content<br>
          More Content
        </div>
      </td>
      <td>Left-aligned Content</td>
      <td>Left-aligned Content</td>
    </tr>
    <!-- Add more rows as needed -->
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search