Table to appear as grid, Set widths on TR

[amean_n]

Hi there,

I have a table like so:

<table border="0" id="ctl00_ProductCatList">
        <tbody >
            <tr >
                <td >
                    <input type="radio" value="TV, DVD &amp; Audio" name="ctl00$ProductCatList" id="ctl00_ProductCatList_0"/><label for="ctl00_ProductCatList_0" >TV,
                            DVD &amp; Audio</label>
                </td>
            </tr>
            <tr >
                <td >
                    <input type="radio" value="Kitchen &amp; Laundry" name="ctl00$ProductCatList" id="ctl00_ProductCatList_1"/><label for="ctl00_ProductCatList_1" >Kitchen
                            &amp; Laundry</label>
                </td>
            </tr>
            <tr >
                <td >
                    <input type="radio" value="Sofas &amp; Dining" name="ctl00$ProductCatList" id="ctl00_ProductCatList_2"/><label for="ctl00_ProductCatList_2" >Sofas
                            &amp; Dining</label>
                </td>
            </tr>
            <tr >
                <td >
                    <input type="radio" value="Bedroom" name="ctl00$ProductCatList" id="ctl00_ProductCatList_3"/><label for="ctl00_ProductCatList_3" >Bedroom</label>
                </td>
            </tr>
            <tr >
                <td >
                    <input type="radio" value="Computing &amp; Consoles" name="ctl00$ProductCatList"
                    id="ctl00_ProductCatList_4" ><label for="ctl00_ProductCatList_4"/>Computing &amp; Consoles</label>
                </td>
            </tr>
            <tr >
                <td >
                    <input type="radio" value="Phones" name="ctl00$ProductCatList" id="ctl00_ProductCatList_5"/>
                    <label for="ctl00_ProductCatList_5" >Phones</label>
                </td>
            </tr>
            <tr >
                <td >
                    <input type="radio" value="Bikes" name="ctl00$ProductCatList" id="ctl00_ProductCatList_6"/><label for="ctl00_ProductCatList_6" >Bikes</label>
                </td>
            </tr>
            <tr >
                <td >
                    <input type="radio" value="Photography" name="ctl00$ProductCatList" id="ctl00_ProductCatList_7"/><label for="ctl00_ProductCatList_7" >Photography</label>
                </td>
            </tr>
            <tr >
                <td >
                    <input type="radio" value="Small Electrical" name="ctl00$ProductCatList" id="ctl00_ProductCatList_8"/><label for="ctl00_ProductCatList_8" >Small
                            Electrical</label>
                </td>
            </tr>
        </tbody>
    </table>

Now, I want the items to appear side by side of each other like the following:

http://anemat.co.uk/desire.jpg

I have acheive this by add a width on the tr in CSS like so:

table#ctl00_ProductCatList
{	margin: 0;
	padding: 0;
	table-layout: fixed;
	width: 450px;
}

table#ctl00_ProductCatList tr
{
	float: left;
	width: 185px !important;
}

This works in FF, Chrome, IE8 but for some reason in IE7 it does now and it renders it as a list style still.

I have no access to the table html as its generated.

Any suggestions or known hacks for IE7 that may work to acheive the jpg look.

Thanks,

[mikeroq]

To do this I would set it up in two columns:

<table>
	<tr>
		<td> Link 1 </td>
		<td> Link 6 </td>
	</tr>
	<tr>
		<td> Link 2 </td>
		<td> Link 7 </td>
	</tr>
	<tr>
		<td> Link 3 </td>
		<td> Link 8  </td>
	</tr>
	<tr>
		<td> Link 4 </td>
		<td> Link 9 </td>
	</tr>
	<tr>
		<td> Link 5 </td>
		<td> Link 10 </td>
	</tr>
</table>

Or:

<table>
	<tr>
		<td>Link 1<br />Link 2<br />Link 3<br />Link 4<br />Link 5</td>
		<td>Link 6<br />Link 7<br />Link 8<br />Link 9<br />Link 10</td>
	</tr>
</table>

Or go tableless:

<div id='container'>
	<div id='left'>
		Link 1
		Link 2
		Link 3
		Link 4
		Link 5
	</div>
	<div id='right'>
		Link 6
		Link 7
		Link 8
		Link 9
		Link 10
	</div>
	<div id='clear'></div>
</div>

#container {
width: 500px;
}
#left {
float: left;
width: 50&#37;;
}
#right {
float: right;
width: 50%;
}
#clear {
clear: both;
}

Upon more reading you said you can't change the table code. This might work:

table#ctl00_ProductCatList
{	margin: 0;
	padding: 0;
	table-layout: fixed;
	width: 450px;
}

table#ctl00_ProductCatList tr
{
	float: left;
	width: 185px !important;
        display: inline;
}