CODEWITHSUNDEEP
csshtml-tablealignment
user609886
user609886

Reputation: 1659

Aligning content within a table with CSS

I have a table in my HTML that is defined like the following

<table>
  <tr>
    <td><img src='corner1.png' /></td>
    <td>First Name <a href='#'>edit</a></td>
    <td><img src='corner2.png' /></td>
  </tr>
</table>

I want the edit link to be right-aligned within the cell. But I want "First Name" to be left-aligned. Currently, everything is left-aligned. How can I make the link right-aligned?

Upvotes: 0

Views: 71

Answers (3)

Atul Gupta
Atul Gupta

Reputation: 755

<td><a href='#' class="floatRight">edit</a> First Name</td>

Entry in CSS file .floatRight {float:right;}

Moved edit before First Name else some browsers will show it in new line and not in-line with First Name.

Upvotes: 1

Allen Liu
Allen Liu

Reputation: 4038

You can try the following CSS:

td a {
    float: right;
}

Upvotes: 0

Bojangles
Bojangles

Reputation: 101473

Set a float on the <a> element:

table tr td a {
    float: right
}

This will push the <a> to the right of the cell. The selector is a bit too specific - at minimum it could be table a.

Upvotes: 0

Related Questions