Problem with CSS

HTML & CSS
1

Hi,

I have a html page. my problem is that my CSS is not working properly . inner scrollable table is shifting away .

I am attaching the source code in a zip file .

Contents of the zip file :

myfile.html ----> this is my html file
presentlook.png —> This is the look I get when i run the above html in browser IE6/IE7
lookIwant.jpg ----> This is my desired look . I have prepared this in mspaint .

What are the changes to be done in my CSS to get the correct display? I don’t want to modify the existing CSS’s but I am open to overwrite styles or use new CSS to get my desired look.

please send back the attachment so that I can run the file and test it here.

2

I want to make 4,6,9th cell little bigger .How to make it ?

<html>
<head>
</head>
<body>
<table width="100&#37;" border="1" align="center" cellpadding="0" cellspacing="0">
<tr> 
<td width="25%">Africa Central</td>
<input type="hidden" name="Africa Central" value="40">






<td class=cellTextLeft style="width:20%;"><input type="checkbox" name="strCustTerr1" value="" align="middle" /></td> 



<td class=cellTextLeft ><input type="checkbox" name="strCustTerr2" value="" align="middle" /></td> 



<td class=cellTextGreyLeft><input type="checkbox" name="strCustTerr3" value="" align="middle" /></td> 



<td class=cellTextGreyLeft><input type="checkbox" name="strCustTerr4" value="" align="middle" /></td> 



<td class=cellTextLeft><input type="checkbox" name="strCustTerr5" value="" align="middle" /></td> 



<td class=cellTextLeft><input type="checkbox" name="strCustTerr6" value="" align="middle" /></td> 



<td class=cellTextGreyLeft><input type="checkbox" name="strCustTerr7" value="" align="middle" /></td> 



<td class=cellTextGreyLeft><input type="checkbox" name="strCustTerr8" value="" align="middle" /></td> 



<td class=cellTextLeft><input type="checkbox" name="strCustTerr9" value="" align="middle" /></td> 



<td class=cellTextLeft><input type="checkbox" name="strCustTerr10" value="" align="middle" /></td> 



<td class=cellTextGreyLeft><input type="checkbox" name="strCustTerr11" value="" align="middle" /></td> 



<td class=cellTextGreyLeft><input type="checkbox" name="strCustTerr12" value="" align="middle" /></td> 



<td class=cellTextLeft><input type="checkbox" name="strCustTerr13" value="" align="middle" /></td> 



<td class=cellTextLeft><input type="checkbox" name="strCustTerr14" value="" align="middle" /></td> 



<td class=cellTextGreyLeft><input type="checkbox" name="strCustTerr15" value="" align="middle" /></td> 



<td class=cellTextGreyLeft><input type="checkbox" name="strCustTerr16" value="" align="middle" /></td> 



</tr>
</table>
</body>
</html>
3

Assuming that the table is big enough to allow the widths to be set then just add a class to the cells in question.


.cell4 {
    width:10&#37;;
    background:green
}
.cell6 {
    width:15%;
    background:blue;
}
.cell9 {
    width:20%;
    background:yellow
}




<table width="100%" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td width="25%">Africa Central
            <input type="hidden" name="Africa Central" value="40"></td>
        <td class="cellTextLeft" style="width:20%;"><input type="checkbox" name="strCustTerr1" value="" align="middle" /></td>
        <td class="cellTextLeft" ><input type="checkbox" name="strCustTerr2" value="" align="middle" /></td>
        <td class="cellTextGreyLeft [B]cell4"[/B]><input type="checkbox" name="strCustTerr3" value="" align="middle" /></td>
        <td class="cellTextGreyLeft"><input type="checkbox" name="strCustTerr4" value="" align="middle" /></td>
        <td class="cellTextLeft[B] cell6"[/B]><input type="checkbox" name="strCustTerr5" value="" align="middle" /></td>
        <td class="cellTextLeft"><input type="checkbox" name="strCustTerr6" value="" align="middle" /></td>
        <td class="cellTextGreyLeft"><input type="checkbox" name="strCustTerr7" value="" align="middle" /></td>
        <td class="cellTextGre[B]yLeft cell9[/B]"><input type="checkbox" name="strCustTerr8" value="" align="middle" /></td>
        <td class="cellTextLeft"><input type="checkbox" name="strCustTerr9" value="" align="middle" /></td>
        <td class="cellTextLeft"><input type="checkbox" name="strCustTerr10" value="" align="middle" /></td>
        <td class="cellTextGreyLeft"><input type="checkbox" name="strCustTerr11" value="" align="middle" /></td>
        <td class="cellTextGreyLeft"><input type="checkbox" name="strCustTerr12" value="" align="middle" /></td>
        <td class="cellTextLeft"><input type="checkbox" name="strCustTerr13" value="" align="middle" /></td>
        <td class="cellTextLeft"><input type="checkbox" name="strCustTerr14" value="" align="middle" /></td>
        <td class="cellTextGreyLeft"><input type="checkbox" name="strCustTerr15" value="" align="middle" /></td>
        <td class="cellTextGreyLeft"><input type="checkbox" name="strCustTerr16" value="" align="middle" /></td>
    </tr>
</table>

Of course as the table gets squashed the widths will be ignored to allow room for the other cells (which is the way that tables behave and why previously spacer gifs were used to force the issue).

You could also use colgroup to set the width of the cells as long as you don’t over-ride it on the td itself. More information [URL=“http://www.search-this.com/2007/04/11/styling-table-columns-with-css/”]here.

4

simply give the particular <td> a bigger height it will become biger

vineet

5

I think you meant width vineet :slight_smile: (you can’t have just one cell higher ;))

6

Threads merged as they are relevant to the same question

7

You can’t have the header information as part of a separate table because it will not keep track with the content. The header must be part of the same table to make it work.

There are javascript solutions around (google it) but the closest css solution (probably anywhere in the world) is the one we did in the CSS quiz (see quiz archive stickies at the top of the forum) and as shown in [URL=“http://www.pmob.co.uk/temp/table-fixed-header-example.htm”]this demo.

It’s a little complicated and needs to be followed exactly but should accomplish what you want.

If you want to use 2 tables as per your example you would need to fix the width of every cell in both tables and use a fixed width table (not percentages).