CODEWITHSUNDEEP
htmlcssbuttonhtml-tablevertical-alignment
user1323245
user1323245

Reputation: 638

Position a HTML button to bottom right of a table

Tried various solutions but I can't get any to work and I have a very hard time getting my head about positioning HTML elements. This one should be about as easy as they come imo. Still...

NOTE: The button is NOT to be part of the table.

I have a table and I want to position a button to the right of the table, with the bottom of the button bottom vertically aligned to the bottom of the table.

Edited to provide basic layout.

<table id="someTable">
  <tr>
    <td>SomeCell</td>
  </tr>
</table>
<button id="somebutton">
  A button
</button>

Upvotes: 5

Views: 20889

Answers (3)

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

You can try this:

Updated fiddle here

<table id="someTable">
   <tr>
      <td>Some cell</td>
   </tr>
<tfoot>
   <tr>
      <td valign="bottom" align="right">
        <button id="someButton">
          A button
        </button>
      </td>
   </tr>
</tfoot>
</table>

Good luck.....

Upvotes: 2

user1323245
user1323245

Reputation: 638

Managed to get it working.

<div>
  <table id="someTable">
    <tr>
      <td>SomeCell</td>
    </tr>
  </table>
  <button id="someButton">
    A button
  </button>
</div>

#someTable
{
  display: inline-table;
}
#somebutton
{
  display: inline-block;
  vertical-align: bottom;
}

http://jsfiddle.net/Pf9Y7/

Upvotes: 1

Anand Natarajan
Anand Natarajan

Reputation: 1162

<table border="1" width="250">
<tr>
    <td>Hello <br/><br/><br/></td>
    <td valign="bottom" align="right"><button type="button">Click Me!</button></td>
</tr>
</table>

Upvotes: 0

Related Questions