Table width adjustment

[genzedu777]

Hi,

 

I have a problem here. After applying this code, all my contents overflow out from the given width.

 

I have tried to apply changes to <table>, by setting <table width="20%">. However to no avail. There is no improvement, the table does not strink.

 

I have attached 2 pictures, 1) example_pic (which is my current one), 2)to_achieve picture (that is what I am referring to, which I will like to achieve).

 

Is there anyone who can assist? Should I change the padding or margin of the <td> instead? Thanks

 

 

<div id="panel4">

<br/>

<span style="font-size:14px"><strong>School Attended:</strong></span>

<br/>

<span class="tabs_font_non_bold"><i>(Raffles Junior College, Temasek JC, SRJC etc.)</i></span>

<br/>

<input type="text" SIZE="70" NAME="aLvlQual1" MAXLENGTH="50"/><br><br>

<table width="20%">

<tr><td></td><td><span style="font-size:14px"><strong>Grade</strong></span></td><td></td><td></td><td></td><td></td></tr>

 

<tr> <!--1st row-->

<td><span style="font-size:14px"><strong>English Literature:</strong></span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualGP" MAXLENGTH="2"></td>

 

<td><span class=txt-body-bold>General Paper:</span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualGP" MAXLENGTH="2"></td>

 

<td><span class=txt-body-bold>Chinese:</span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualCN" MAXLENGTH="2"></td>

 

</tr> <!--End of 1st row-->

 

 

<tr> <!--2nd row-->

<td><span class=txt-body-bold>Higher Chinese:</span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualHN" MAXLENGTH="2"></td>

 

<td><span class=txt-body-bold>Malay:</span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualMY" MAXLENGTH="2"></td>

 

<td><span class=txt-body-bold>Tamil:</span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualTM" MAXLENGTH="2"></td>

</tr> <!--End of 2nd row-->

 

<tr> <!--3rd row-->

<td><span class=txt-body-bold>Accounting:</span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualAC" MAXLENGTH="2"></td>

 

<td><span class=txt-body-bold>Geography:</span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualGY" MAXLENGTH="2"></td>

 

<td><span class=txt-body-bold>History:</span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualHY" MAXLENGTH="2"></td>

</tr> <!--End of 3rd row-->

 

<tr> <!--4th row-->

<td><span class=txt-body-bold>Economics:</span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualEC" MAXLENGTH="2"></td>

 

<td><span class=txt-body-bold>Maths C:</span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualMC" MAXLENGTH="2"></td>

 

<td><span class=txt-body-bold>Maths F:</span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualMF" MAXLENGTH="2"></td>

</tr> <!--End of 4th row-->

 

<tr> <!--5th row-->

<td><span class=txt-body-bold>Chemistry:</span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualCH" MAXLENGTH="2"></td>

 

<td><span class=txt-body-bold>Biology:</span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualBI" MAXLENGTH="2"></td>

 

<td><span class=txt-body-bold>Physics:</span></td>

<td><input type="text" SIZE="1" NAME="aLvlQualPH" MAXLENGTH="2"></td>

</tr> <!--End of 5th row-->

 

</table>

 

<br/>

<span style="font-size:14px"><strong>S-paper/H3-paper:</strong></span>

<br/>

<span class="tabs_font_non_bold"><i>Math S paper (Distinction), History H3 paper (Merit)</i></span>

<br/><input type="text" SIZE="70" NAME="aLvlQual2" MAXLENGTH="50"/>

 

</div><!--end Panel 4-->

 

[attachment deleted by admin]

[Mr_J]

Can't see why...

What does the div "panel4" do?

Also, I used SharePointDesigner 2007 with a similar problem and with the controls in SPD, it gave the <tbody~ // <thead Style="width: 200px; ...> values and it was fine.

 

 

 

[LuRKeR]

Post your CSS - you are making class calls within the <span> tags

 

Also, Check your tabs, the error might be there

[justin813]

Shows up fine with just the code you provided so something's wrong in the CSS.