CODEWITHSUNDEEP
htmlcssbuttonhtml-table
user4255838
user4255838

Reputation:

How do I make a button fill in a td completely?

I have rows including a button in the last column:

img
(source: hizliresim.com)

I want to make a button fill a td completely. I tried width: 100% and height: 100% together, but it didn't work. This is my code:

<td>
    <input type='button' style='width:100%; height:100%;' value='Delete' onclick='deleteRow(\"{$rec['memberID']}\")'/>
</td>

Why doesn't it work, and how can I make it work?

Upvotes: 8

Views: 46079

Answers (3)

Pila
Pila

Reputation: 5832

A button whose width and heights are made 100% will fill the width of the <td> element but wouldn't fill the height of that element. The preferred solution to this issue is simply to make the height of the <td> 100% as well. e.g.

 <tr>
      <td><button class="btn" id="1">1</button></td>
      <td><button class="btn" id="2">2</button></td>
      <td><button class="btn" id="3">3</button></td>
      <td><button class="btn" id="plus">+</button></td>
      <td rowspan="2"><button class="btn btn-block" id="equals">=</button></td>
    </tr>

CSS:

td{
    height: 100%;
}
.btn {
    width: 100%;
    height: 100%;
}

That should work fine

Upvotes: -1

jlowcs
jlowcs

Reputation: 1933

Here's an idea.

Since the behavior of height:100% is clearly weird when a button is directly in a td, but not when it's a button inside a div or a div inside a td, let's combine those 2:

http://jsfiddle.net/y3zom5m4/2/

<table cellpadding="0" cellspacing="0">
    <tr>
        <td style="width: 100px; height: 50px; border: 1px solid black;">
            <div style="width: 100%; height: 100%;">
                <input type="button" style="width: 100%; height: 100%;" value="Button in a div in a td"/>
            </div>
        </td>
    </tr>
</table>

Not the most elegant solution, but it works!

Upvotes: 3

Inzamam Tahir
Inzamam Tahir

Reputation: 537

This should work:

<td><input class='myclass' type='button' value='Delete'/></td>

CSS code:

 .myclass{
    display:inline-block;
    width: 80px;
    height: 40px;
}

Try the fiddle here

http://jsfiddle.net/4r5roc2L/3/

Edited Answer here:

http://jsfiddle.net/4r5roc2L/4/

Upvotes: 5

Related Questions