How do I make a button stretching to the entire length of the right side of a table?

I need a button spanning the entire length of a table that will perform the function of making a call to get the next data-set to save the user from having to manually selecting it.

Unfortunately my css 开发者_如何转开发is not that great. Any help? Thanks!

There is some confusion as to what I want, let me try to draw it.

| table |b|
|       |u|
|       |t|
|_______|n|

I can't give you the mark up because it's at work. Plus it's heavily templated so it wouldn't help much.

---

Ok, so that problem is a little trickier.

<div style="position: relative;">
  <table style="">
    <tr>
      <td>asdasdasdssssssss sssssssssssss sssssssssss sssssssss sssssssssssssss sssssssss</td>
      <td>betasssssssssssssssssssssssssssss ssssssssssssssssssssssssssss ssssssssssssssss sssssssssss sssssss sssssssssssssssss s s ss s s s</td>
    </tr>
    <tr>
      <td>alpha</td>
      <td>beta</td>
    </tr>
  </table>
  <div style="position: absolute; top: 0pt; right: 0pt; bottom: 0pt;">
    <button style="height: 100%;">c</button>
  </div>
</div>

The problem with this solution is you need to give your content that sits on the right a width then add a margin to the table so that it does not hide behind the button.

There is a lot of information for you to take in over at this related question which points to some valuable resources.

---

<table>
  <tr>
    <td>alpha</td>
    <td>beta</td>
  </tr>
  <tr>
    <td colspan="2"><button style="width:100%">c</button></td>
  </tr>
</table>

Some example of what you are trying to lay out and what you have tried would have been useful. The important thing is the colspan which turns many columns into 1.

---

I wouldn't recommend using <table>s, as they scale differently than most elements (i.e. if you have an element inside a table that gets too big (like a block/inline-block/or long word) the table scales, possibly throwing off your layout. That, and having to mark each row adds more cruft to your markup.

Anyways, if you want to span multiple rows to be able to right align an <input type="submit"/> or whatever you're trying to do, you can simply say:

<table>
  <tr>
    <!-- lots of other rows and stuff -->
    <td colspan="4" align="right"><!-- Adjust [colspan] to # of rows in yours -->
      <input type="submit" value="I'm on the right now!"/>
    </td>
  </tr>
</table>

The align="right" does what you'd expect - aligns inline/inline-block elements to the right (generally text and images). The colspan="4" (again, replace with your own number of columns) simply tells the table that you're going to be merging 4 columns of the table starting with you (going to the right).

So, before:

-------------------------
|  1  |  2  |  3  |  4  |
-------------------------
| <------ after ------> |
-------------------------

Hope that helps.