5

I have a <td> element with content and a button. The width of the content should be all except the width of the button which will be fixed. The button should be aligned to the right of the content. How can I achieve this, the following doesn't work:

<table border="1px">
  <tr>
    <td>
      <div>
        <div style="width: auto; overflow: auto;">
          <span>
            <form>
            <textarea></textarea>
            </form>
          </span>
        </div>
        <div style="float: right; width: 32px;">
          <button type="button" class="btn btn-primary">
            Click
          </button>
        </div>
      </div>
    </td>
    <td>Another cell</td>
  </tr>
</table>

1

5 Answers 5

5

Use style="float: right;"

<table border="1px">
  <tr>
    <td>
      <div style="display:inline-block">
        <div style="display: inherit;width: calc(100% - 32px);overflow: auto;">
          <span>
            <form>
            <textarea></textarea>
            </form>
          </span>
        </div>
        <div style="float: right; width: 32px;">
          <button type="button" class="btn btn-primary" title="Select Financial Instrument" style="width:100%; word-wrap: break-word;">
            Click
          </button>
        </div>
      </div>
    </td>
    <td>Another cell</td>
  </tr>
</table>

4
  • Worked great, thanks! Is it possible to get rid of the calc in the second div?
    – Roland
    Jun 13, 2017 at 11:50
  • no problem... is there any problem with the calc? let me know ... i'll update it :) Jun 14, 2017 at 10:04
  • No problem with the calc I just want to have the logic be as simple as possible, therefore avoid calling functions.
    – Roland
    Jun 14, 2017 at 10:12
  • I found a solution, take a look at my answer.
    – Roland
    Jun 14, 2017 at 14:49
3

Based on Gerard's answer the following worked best for me:

<table border="1px">
  <tr>
    <td>
      <div style="display: inline-flex; align-items: center; width: 100%;">
        <div>
          <span>
            <form>
            <textarea></textarea>
            </form>
          </span>
        </div>
        <div style="padding: 5px;">
          <button type="button">
            Click
          </button>
        </div>
      </div>
    </td>
    <td>Another cell</td>
  </tr>
</table>

2

Is this what you need?

<table border="1px">
  <tr>
    <td>
      <div style="display: flex;">
        <form>
          <textarea></textarea>
        </form>
        <button type="button" class="btn btn-primary" title="Select Financial Instrument">
            Click
        </button>
      </div>
    </td>
    <td>Another cell</td>
  </tr>
</table>

2

you could decrease the font-size of the button so it fits inside the desired width (32px) you've set to the parent div

don't really understand your logic behind this html structure, but here is your solution

<table border="1px">
  <tr>
    <td>
      <div>
        <div style="width:calc(100% - 32px);overflow: auto;float:left">
          <span>
            <form>
            <textarea></textarea>
            </form>
          </span>
        </div>
        <div style="float: right;">
          <button type="button" class="btn btn-primary" style="width:32px;font-size:8px;" title="Select Financial Instrument">
            Click
          </button>
        </div>
      </div>
    </td>
    <td>Another cell</td>
  </tr>
</table>

2
  • Doesn't work, your code places the button below the input field, I want it to the right.
    – Roland
    Jun 13, 2017 at 10:08
  • oh. didn't understand the question correctly. thought the overflow was the problem. use calc() to calculate the left div width , width:calc(100% - 32px) and also add float left. changed my answer. though it's too late :)
    – Mihai T
    Jun 13, 2017 at 10:21
1

You can use a <table> and place the form in one <td> and the button in the other. Then you can fix the width of the <td> containing the button. This will force the first <td> to adjust its width according to the <table> width.

Check this jsFiddle, try to change the width of the main table and see how the <textarea> (and the <td>) adjust the width accordingly.

Update:

How about this, with no changes to your HTML structure:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
<table border="1px" style="width: 450px">
  <tr>
    <td>
      <div style="display: table; width: 100%">
        <div style="display: table-row">
          <div style="display: table-cell">
            <span style="display: block; width: 100%">
              <form style="display: block; width: 100%">
                <textarea style="display: block; width: 100%"></textarea>
              </form>
            </span>
          </div><!-- table-cell -->
          <div style="display: table-cell; width: 32px;">
            <button type="button" class="btn btn-primary">
              Click
            </button>
          </div><!-- table-cell -->
        </div><!-- table-row -->
      </div><!-- table -->
    </td>
    <td>Another cell</td>
  </tr>
</table>

1
  • That would be possible but I want to avoid this solution because the button belongs semantically to this specific table element.
    – Roland
    Jun 13, 2017 at 10:20

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.