1

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.

3
  • What is it (the CSS)? And the markup, too. Oct 13, 2011 at 2:49
  • It's just a regular table in the middle of a page with a form inside.
    – Eugene
    Oct 13, 2011 at 2:51
  • Please post it (CSS and markup). Oct 13, 2011 at 2:52

3 Answers 3

1

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.

0
1
<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.

2
  • 1
    I need it to span the length, not the width and not be part of the table.
    – Eugene
    Oct 13, 2011 at 2:58
  • Well then you'll need to provide an example of what you want it to look like in the question. Both I and Dan have misunderstood you.
    – pimaster
    Oct 13, 2011 at 3:02
0

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.

1
  • 1
    I don't want it to be part of a table. Is it possible to make some kind of floating div? And I don't need it to span the width. I need it to span the length. Thanks : )
    – Eugene
    Oct 13, 2011 at 2:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.