CODEWITHSUNDEEP
htmlcsshtml-table
Tyde
Tyde

Reputation: 252

Button on table header

I have a problem with a old site and I need to place a button in a div element, but on the top of a table.

<div class="panel2" style="border: 1px solid red;">
    <div id="charInfo">
        <input type="button" id="lockList" name="lockList" value="Lock WL" />
        <table width="500px" style="border:1px solid #000;border-collapse:collae;font-familyrif;font-size:80%;">
            <caption style="font-size:140%;padding:5px;">Wish list status <b>Tyde</b>
            </caption>
            <thead>
                <tr>
                    <th scope="col">Zone name</th>
                    <th scope="col">Wish Items</th>
                    <th scope="col">Received</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr></tr>
                <tr>
                    <th scopre="row">Heart of Fear</th>
                    <td align="center">22</td>
                    <td align="center">0</td>
                    <td align="center" style="color:Green;"><b>Active</b>
                    </td>
                </tr>
                <tr>
                    <th scopre="row">Mogu-shan Vaults</th>
                    <td align="center">27</td>
                    <td align="center">4</td>
                    <td align="center" style="color:Green;"><b>Active</b>
                    </td>
                </tr>
                <tr>
                    <th scopre="row">Throne of Thunder</th>
                    <td align="center">45</td>
                    <td align="center">0</td>
                    <td align="center" style="color:Green;"><b>Active</b>
                    </td>
                </tr>
                <tr>
                    <th scopre="row">Throne of Thunder (Heroic)</th>
                    <td align="center">5</td>
                    <td align="center">1</td>
                    <td align="center" style="color:Red;"><b>Not locked</b>
                    </td>
                </tr>
            </tbody>
        </table>
    </div> </div>

I have a example here http://jsfiddle.net/TvwKz/

As you can see the button is placed to the right, but I want to have it placed on top of the table caption. Can it be done and if so how?
This is wat I want

(source: odinsoft.dk)

Upvotes: 3

Views: 15450

Answers (3)

Chirag Vidani
Chirag Vidani

Reputation: 2577

Check with below CSS

#lockList 
{

    width:auto;
}
#charInfo
{
    position: absolute;
    text-align: center;   
}

And fiddle demo

Upvotes: 1

Satpal
Satpal

Reputation: 133403

You can this

CSS

#lockList {width:auto;margin:auto;position: relative;}

HTML

<caption style="font-size:140%;padding:5px;">Wish list status <b>Tyde</b>
            <input type="button" id="lockList" name="lockList" value="Lock WL" />
            </caption>

Demo: http://jsfiddle.net/ypAVr/

Upvotes: 2

Bharadwaj
Bharadwaj

Reputation: 2553

As referring to the fiddle link which you have give, remove float:right; from lockList css class.

#lockList {width:auto;margin:auto;position: relative;}

Upvotes: 1

Related Questions