How to give fix width to <td>??

Question

Hi,

since I am generating data dynamically..adding <tr> and <td> in it, the <td>s are generate according to data count,and according to setting in each row only 2 data can be display. each cell is given width 50%

The problem is if the data count is odd for example 3 the first row and its cells generate perfectly..but in the next row due to single cell it take full space, I can't give width in pixels because of different screen resolutions :(

Answer 1

<td style="width:25px;">

Answer 2

You will want to either set a width via a style ( style="width: XXXpx") or you should really be generating the full number of empty table cells that are possible for each row.

Answer 3

The proper way to set an element size is to use CSS:

table{
    border-collapse: collapse;
}
td{
    width: 50%;
    padding: 0;
}

If you need to set different sizes depending on the row, you can use classes:

<table>
<tr class="double"><td>Foo</td><td>Bar</td></tr>
<tr><td colspan="2">Gee</td></tr>
</table>


table{
    border-collapse: collapse;
}
tr.double td{
    width: 50%;
    padding: 0;
}

Of course, you must take two facts into account:

1. Being a table, columns must align so you don't really need to set sizes for all rows; settings sizes for the row with most cells should be enough.
2. The browser may make the cells larger if contents do not fit.

Answer 4

I don't exactly understand why your table doesn't work well for ODD number of data.

Maybe you can show us some code.

The following code works well for ODD/EVEN number of records

<table>
        <tr>
                <td style='width: 50%;'>Data 1</td>
                <td style='width: 50%;'>Data 2</td>
        </tr>
        <tr>
                <td>Data 3</td>
                <td>Data 4</td>
        </tr>
        <tr>
                <td>Data 5</td>
        </tr>
</table>