Search code examples
htmlcsshtml-tablecss-float

Align button to the right in td element


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>


Solution

  • 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>