Table column alignment CSS

Question

I edit e-books in e-pub format. I use CSS to do the book layout. I am confronted with a table column alignment problem, and I have no cue as to how to deal with it. The table has text headings for each column, and then numerical content of the cells. The column width is set by the heading, which makes in some cases the column very wide as compared to the cells contents.

I want to right-align the numbers in the column to their last digit. But I would like them to be placed more to the center of the column. The "text-align: right" command aligns the numbers at the right side of the cell. Is there a way to shift all the numbers towards the center while keeping them all right-aligned to the last digit?

Can you post the code you already have so we know what you have going for you at the moment? Also, the way I view your request with the numbers is let's say you have "left, mid-left, middle, mid-right, and right", you want the numbers to be aligned mid-right. Am I correct? — JoeL, Mar 14 '16 at 19:43

Asons · Accepted Answer · 2016-03-14T20:41:44.973

Here is a couple of ways that might could work for you

table {
  width: 400px;
  border: 1px solid gray;
}
td {
  text-align: center;
  border: 1px solid gray;
  width: 33%;
}
span {
  display: inline-block;
  width: 40%;
  background: #eee;
  text-align: right;
}

<table>
  <tr>
    <td>
      <span>
        nr 1
      </span>
    </td>
    <td>
      <span>
        nr 12
      </span>
    </td>
    <td>
      <span>
        nr 123
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <span>
        nr 123
      </span>
    </td>
    <td>
      <span>
        nr 12
      </span>
    </td>
    <td>
      <span>
        nr 1
      </span>
    </td>
  </tr>
</table>

Sample 2

table {
  width: 400px;
  border: 1px solid gray;
}
td {
  text-align: center;
  border: 1px solid gray;
  width: 33%;
}
span {
  display: inline-block;
  width: 50%;
  background: #eee;
  text-align: right;
}
span span {
  float: left;
  text-align: left;
}

<table>
  <tr>
    <td>
      <span>
        <span>
          id
        </span>
        1
      </span>
    </td>
    <td>
      <span>
        <span>
          cnt
        </span>
        12
      </span>
    </td>
    <td>
      <span>
        <span>
          code
        </span>
        123
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <span>
        <span>
          code
        </span>
        123
      </span>
    </td>
    <td>
      <span>
        <span>
          cnt
        </span>
        12
      </span>
    </td>
    <td>
      <span>
        <span>
          id
        </span>
        1
      </span>
    </td>
  </tr>
</table>

Table column alignment CSS

1 Answers1