How to make <button> fill a table cell <td>?
Asked Answered
C

1

30

I have this HTML ...

<p align='center'>
<table width='100%'>
<tr>
<td align='center'><form><input type=submit value="click me"></form></td>
</tr>
</table>
</p>

... which results in a table and button that looks like this ...

button that does not fill table

... which is fine, but how would I make the button fill the entire cell?

Thanks!

Connivent answered 11/9, 2012 at 4:42 Comment(1)
check this out <#990359>Catchword
P
33

For starters:

<p align='center'>
<table width='100%'>
  <tr>
    <td align='center'>
      <form>
        <input type=submit value="click me" style="width:100%"> 
      </form>
    </td>
  </tr>
</table>
</p>

Note, if the width of the input button is 100%, you wont need the attribute "align='center'" anymore.

This would be the optimal solution:

<p align='center'>
<table width='100%'>
  <tr>
    <td>
      <form>
        <input type=submit value="click me" style="width:100%"> 
      </form>
    </td> 
  </tr>
</table>
</p>
Predigestion answered 11/9, 2012 at 4:45 Comment(2)
Thanks. Would I need height:100% also ? if so would I use this: style="width:100%;height:100%" ?Connivent
You would only need to do that if the height of your <td> element is greater than the height of the <input> element. You could definately do that.Predigestion

© 2022 - 2024 — McMap. All rights reserved.