HTML/CSS: Tables: width not working

Question

Having (as usual) trouble understanding HTML and CSS:

I got a table:

<table style="height:200px;width:120px; border-style:solid;">
    <tr>
        <td><img src=IMAGELINK" style="height:120px;width:120px;"/></td>
    </tr>
    <tr>
        <td><b> NAME </b> </td>
    </tr>
    <tr>
        <td> <b> PRICE:- </b> </td>
    </tr>
    <tr>
            <td>
            <a style=
                "
                width:50%;
                padding:1px;
                border-style:solid;
                border-width:1px;
                border-color: #eee0000;
                background-color:#eee000;
                text-decoration:none;
                color:black;"
                href="LINK"> buy 
            </a>
            <a style=
                   "
                width:50%;
                padding:1px;
                border-style:solid;
                border-width:1px;
                border-color: #eee0000;
                background-color:#eee000;
                text-decoration:none;
                color:black;"
                href="LINK"> read 
            </a>

        </td>
    </tr>
</table>

And here's how it looks: enter image description here

As you can see, the two buy/read buttons are quite small and for some reason they're only taking up half the space of the row. I've tried a whole bunch of different things to get the two buttons to take up the whole row...

falcon · Accepted Answer · 2014-04-26 19:49:10Z

4

Maybe you could use colspan attribute for table cells http://jsfiddle.net/zKW3z/1/

answered Apr 26, 2014 at 19:49

falcon

3572 gold badges5 silver badges21 bronze badges

And height for table is unnecessary
– falcon
Commented Apr 26, 2014 at 19:52
1

Heh always hard to pick the amongst several correct answers so I'll make it fair and pick the one who posted first.
– optional
Commented Apr 26, 2014 at 20:10

Add a comment |

Lies · Accepted Answer · 2014-04-26 19:51:09Z

Personally I think it is not a good idea to apply formatting to the <a href=""> code.

I adjusted your code so the buttons fill the space by putting them in <div>'s and setting float:left and float:right. Also don't use 50% for the width because there is some padding and margins active.

http://jsfiddle.net/tK9Vg/

<table style="height:200px;width:120px; border-style:solid;">
<tr>
    <td><img src=IMAGELINK" style="height:120px;width:120px;"/></td>
</tr>
<tr>
    <td><b> NAME </b> </td>
</tr>
<tr>
    <td> <b> PRICE:- </b> </td>
</tr>
<tr>
        <td>
        <a href="LINK"><div style=
            "
            width:46%;
            float:left;
            padding:1px;
            border-style:solid;
            border-width:1px;
            border-color: #eee0000;
            background-color:#eee000;
            text-decoration:none;
            color:black;
            "
            > buy </div>
        </a>
        <a href="LINK"><div style=
               "
            width:46%;
            float:right;
            padding:1px;
            border-style:solid;
            border-width:1px;
            border-color: #eee0000;
            background-color:#eee000;
            text-decoration:none;
            color:black;
            "
            > read </div>
        </a>
    </td>
</tr>
</table>

This is not really a solution but rather a workaround. With this code, the two anchor tags are always 'stuck' to the corners of the table. In case, the size of the table increases, these two would start to move away from each other due to the float property. That would make the UI look clumsy. See this case here: jsfiddle.net/tK9Vg/2 — Satwik Nadkarny, Commented Apr 26, 2014 at 20:10
Your comment is correct. The code in the fiddle link contains fixed width for the 2 links. I forgot to update it with the % values like in the code you see in the answer: 46%. Also, like stated in an other answer, the style should be in a separate css. jsfiddle.net/tK9Vg/1 — Lies, Commented Apr 26, 2014 at 20:19

Satwik Nadkarny · Accepted Answer · 2014-04-26 20:23:21Z

Its never a good idea to write inline CSS. This is considered as bad practice. Understand that html is only used for representation of information. How exactly it should look/appear is something that is handled by CSS. Since they perform different functions, they must be kept seperate. This is called 'Seperation of concerns'.

So I would suggest you to edit your code so as to keep them seperate.

So you can have your HTML as this:

<table style="height:200px;width:120px; border-style:solid;">
    <tr>
        <td>
            <img src="#/>
        </td>
    </tr>
    <tr>
        <td><span>NAME</span>
        </td>
    </tr>
    <tr>
        <td><span>PRICE:-</span>
        </td>
    </tr>
    <tr>
        <td> <div><a href="#"> Buy</a></div> 
 <div> <a href="#"> Read </a></div> 

        </td>
    </tr>
</table>

And your CSS as this:

td > img {
    height:120px;
    width:120px;
}
td > span {
    font-weight:bold;
}

td > div {
    width: 48%;
    display:inline-block;
}

div > a {
    width:100%;
    margin:0 1px;
    border-style:solid;
    border-width:1px;
    border-color: #eee0000;
    background-color:#eee000;
    text-decoration:none;
    color:black;
    display:inline-block;
    text-align:center;
}

This will give you what you are looking for.

See that here: http://jsfiddle.net/9HxW5/

Hope this helps!!!

Collectives™ on Stack Overflow

HTML/CSS: Tables: width not working

3 Answers 3

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Related