Question

I have created a table and now i wanted to change the width of td’s depending on the text. but it is not effecting on td’s. and If i change the width of first td then it also automatically change the width of next tr “td”. How can i give different widths on different td’s in html.Below is my code.

<div style="width:100%;">
    <table border="1">
        <tr>
            <td style="font-weight:bolder;" width="150px"><span id="lblStockName"></span></td>
        </tr>
        <tr>
            <td style="font-weight:bolder;" width="30px">Bid:</td>
            <td><span id="lblBid"></td>
            <td></td>
            <td style="font-weight:bolder;">Ask:</td>
            <td><span id="lblAsk"></td>
            <td></td>
            <td style="font-weight:bolder;">Spot:</td>
            <td><span id="lblSpot"></td>
            <td></td>
            <td style="font-weight:bolder;">Hi:</td>
            <td><span id="lblHi"></td>
        </tr>
        <tr>
            <td><span id="lblLimit"></td>
            <td></td>
            <td style="font-weight:bolder;">Last:</td>
            <td><span id="lblLast"></td>
            <td></td>
            <td style="font-weight:bolder;">Ch:</td>
            <td><span id="lblCh"></td>
            <td></td>
            <td style="font-weight:bolder;">Vol:</td>
            <td><span id="lblVol"></td>
            <td></td>
            <td style="font-weight:bolder;">Low:</td>
            <td><span id="lblLow"></td>'
        </tr>
    </table>
</div>

Answer 1

Please note, width="150px" is invalid, try width="150" or style="width: 150px" instead.

If i change the width of first td then it also automatically change the width of next tr “td”

This is by design; to get different widths for each <tr>‘s set of <td>‘s, you’ll have to nest tables.

---

Edit

If you’re going to stay with your current layout, you should use colspan so that <td>‘s are balanced:

<div style="width:100%;">
    <table border="1">
        <tr>
            <td style="font-weight:bolder; width: 150px" colspan="13"><span id="lblStockName"></span></td>
        </tr>
        <tr>
            <td style="font-weight:bolder; width: 30px">Bid:</td>
            <td><span id="lblBid"></td>
            <td>&nbsp;</td>
            <td style="font-weight:bolder;">Ask:</td>
            <td><span id="lblAsk"></td>
            <td>&nbsp;</td>
            <td style="font-weight:bolder;">Spot:</td>
            <td><span id="lblSpot"></td>
            <td>&nbsp;</td>
            <td style="font-weight:bolder;">Hi:</td>
            <td colspan="3"><span id="lblHi"></td>
        </tr>
        <tr>
            <td><span id="lblLimit"></td>
            <td>&nbsp;</td>
            <td style="font-weight:bolder;">Last:</td>
            <td><span id="lblLast"></td>
            <td>&nbsp;</td>
            <td style="font-weight:bolder;">Ch:</td>
            <td><span id="lblCh"></td>
            <td>&nbsp;</td>
            <td style="font-weight:bolder;">Vol:</td>
            <td><span id="lblVol"></td>
            <td>&nbsp;</td>
            <td style="font-weight:bolder;">Low:</td>
            <td><span id="lblLow"></td>
        </tr>
    </table>
</div>