Align Right in a Table Cell with CSS

align right in a table cell with CSS

Use

text-align: right

The text-align CSS property describes
how inline content like text is
aligned in its parent block element.
text-align does not control the
alignment of block elements itself,
only their inline content.

See

text-align

<td class='alnright'>text to be aligned to right</td>

<style>
    .alnright { text-align: right; }
</style>

Table cells right align inside row

The td should span two columns by using the attribute colspan="2", and align the text to the right:

.alignRight {

  text-align: right;

}

<table>

  <tr>

    <th>one</th>

    <th>two</th>

    <th>three</th>

  </tr>

  <tr>

    <td>one</td>

    <td>two</td>

    <td>three</td>

  </tr>

  <tr>

    <td>this</td>

    <td colspan="2" class="alignRight">right</td>

  </tr>

</table>

How to get a table-cell aligned to the right?

If the only reason you don't want an extra cell because you don't have control of the HTML, you could do this:

.row + .row:before {
    content: '';
    display:table-cell;
    background-color:white;
}

http://jsfiddle.net/7H7rf/6/

Align block element to the right in a table cell

You can set the margin-left of your element to the auto:

td label.error {
    margin-left: auto;
    text-align: right;
    display: block;
    width: 155px;
}

How to right align numbers in the center of a table cell?

Updated based on an edit of the question and a few comments

In a comment you wrote "In the desired outcome, the cell width stays the same (200px) as numbers change".

In another comment you wrote "...my numbers are links and I want them to occupy the full cell width".

Given those requirements, the only CSS based solution I can find is, where one use CSS Table instead of <table> elements, an anchor a element displayed as table-row, making the full width clickable without adding an event handler, and for the centering, using pseudo elements to puch the numbers to the middle.

Stack snippet

.table {

  display: table;

  border: 1px solid black;

}

.tr {

  display: table-row;

  text-decoration: none;

  color: black;

}

.tr span {

  display: table-cell;

  width: 200px;

}

a.tr {

  text-align: right;

}

.tr::before, .tr::after {

  content: '';

  display: table-cell;

  width: 50%;

}

<div class="table">

  <div class="thead">

    <span class="tr">

      <span>Amount</span>

    </span>

  </div>

  <div class="tbody">

    <a href="#1" class="tr">

      <span>45</span>

    </a>

    <a href="#2" class="tr">

      <span>2</span>

    </a>

    <a href="#3" class="tr">

      <span>18923538273</span>

    </a>

    <a href="#4" class="tr">

      <span>9823</span>

    </a>

  </div>

</div>

<div class="table">

  <div class="thead">

    <span class="tr">

      <span>Amount</span>

    </span>

  </div>

  <div class="tbody">

    <a href="#1" class="tr">

      <span>0</span>

    </a>

    <a href="#2" class="tr">

      <span>0</span>

    </a>

    <a href="#3" class="tr">

      <span>0</span>

    </a>

    <a href="#4" class="tr">

      <span>0</span>

    </a>

  </div>

</div>

How to right align a div within a table cell without wrapping?

You can use flexbox

td:first-child {

  display: flex;

}

td:first-child > div {

  margin-left: auto; /* Push it to the right */

}

<table style="width: 500px">

  <tr>

    <td>

      Test test

      <div>float!</div>

    </td>

    <td>Div with a lot of content</td>

  </tr>

</table>

---

Related Topics