Shalini Subramani
Reputation: 502
Table and td width issue
This works fine in Firefox and Chrome, but not in IE:
CSS
.tablehead th{
border-bottom: 1px solid #C2C2C2;
color: #FFFFFF; background-color:#000058;
font-size: 13px; font-family:calibri!important;
font-weight: 700;
}
.tab_head th.tab_space {
padding-left: 5px;
}
.redtab_head th {
/* Mozilla: */
background: -moz-linear-gradient(top, #C80000, #9F0101);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#C80000), to(#9F0101));
border-bottom: 1px solid #C2C2C2;
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
}
#pls-play { cursor:pointer; }
/*.tb1hide {
table-layout:fixed!important;
}
*/
.box {
text-overflow:clip!important;
overflow:hidden!important;
white-space:nowrap!important; table-layout:fixed!important;
-o-text-overflow: clip!important;
}
*html .box {
width: expression( document.body.clientWidth > 124 ? "124px" : "auto" ); /* sets max-width for IE */
}
HTML
<table width="94%" cellpadding="2" cellspacing="1" class="tablehead" id="pls-batting">
<thead>
<tr class="tab_head" align="right" >
<th width="44" align="center"><span style="text-transform:lowercase;">q te</span>.R </th>
<th width="212" align="left" class="tab_space">tester</th>
<th width="54" align="center">tes</th>
<th width="34" align="center"> tes</th>
<th width="34" align="center" >tes</th>
<th width="34" align="center">te</th>
<th width="34" align="center">tes</th>
<th width="44" align="center">tes</span>.L</th>
<th width="34" align="center"> tes</th>
<th width="34" align="center" >tes</th>
<th width="34" align="center">tes</th>
<th width="34" align="center">tes</th>
</tr>
</thead>
<tbody>
<tr>
<td width="44" align="left" ><span style="display:none;">11</span>
<select name="psvsr_select" class="psvsr_sel_class" id="psvsr_select111904" style="width:40px;" >
<option value=""> </option>
<option>codeup</option>
<option>codeup</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="senddown">Send Down</option>
</select></td>
<td align="left" class="box tb1hide" style="max-width: 124px;">dfjbdsjbfhjb bdshfbdshbfhb jasbdfhbasdhjb
<input type="hidden" name="psb_playerId" value="/111904/" /></td>
<td width="54" align="left" valign="top" >OF</td>
<td align="center" valign="top" ><span style="display:none;" id="r_hr1_hid">3</span>
<input name="r_hr1" type="text" class="txt_fid" id="r_hr1" onBlur="return chk_txtval(this.value,'r_hr1',0,3,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_hr1',0,3,'tbl1')" maxlength="1" value="3" onfocus="return selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_bnt1_hid">3</span>
<input name="r_bnt1" type="text" class="txt_fid" id="r_bnt1" onBlur="return chk_txtval(this.value,'r_bnt1',0,4,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_bnt1',0,4,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_ph1_hid">3</span>
<input name="r_ph1" type="text" class="txt_fid" id="r_ph1" onBlur="return chk_txtval(this.value,'r_ph1',0,5,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_ph1',0,5,'tbl1')" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_run1_hid">3</span>
<input name="r_run1" type="text" class="txt_fid" id="r_run1" onBlur="return chk_txtval(this.value,'r_run11',0,6,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_run11',0,6,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td width="44" align="left" ><span style="display:none;">11</span>
<select name="psvsl_select" class="psvsl_sel_class" id="psvsl_select111904" style="width:40px;" >
<option value=""></option>
<option value="lineup" >Lineup</option>
<option value="bench" >Bench</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="senddown">Send Down</option>
</select></td>
<td align="center" valign="top" ><span style="display:none;" id="l_hr1_hid">3</span>
<input name="l_hr1" type="text" class="txt_fid" id="l_hr1" onBlur="return chk_txtval(this.value,'l_hr1',0,8,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_hr1',0,8,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_bnt1_hid">3</span>
<input name="l_bnt1" type="text" class="txt_fid" id="l_bnt1" onBlur="return chk_txtval(this.value,'l_bnt1',0,9,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_bnt1',0,9,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_ph1_hid">3</span>
<input name="l_ph1" type="text" class="txt_fid" id="l_ph1" onBlur="return chk_txtval(this.value,'l_ph1',0,10,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_ph1',0,10,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_run1_hid">3</span>
<input name="l_run1" type="text" class="txt_fid" id="l_run1" onBlur="return chk_txtval(this.value,'l_run1',0,11,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_run1',0,11,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
</tr>
<tr>
<td width="44" align="left" ><span style="display:none;">11</span>
<select name="psvsr_select" class="psvsr_sel_class" id="psvsr_select111904" style="width:40px;" >
<option value=""> </option>
<option>codeup</option>
<option>codeup</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="senddown">Send Down</option>
</select></td>
<td align="left" class="box tb1hide" style="max-width: 124px;">dfjbdsjbfhjb bdshfbdshbfhb jasbdfhbasdhjb
<input type="hidden" name="psb_playerId" value="/111904/" /></td>
<td width="54" align="left" valign="top" >OF</td>
<td align="center" valign="top" ><span style="display:none;" id="r_hr1_hid">3</span>
<input name="r_hr1" type="text" class="txt_fid" id="r_hr1" onBlur="return chk_txtval(this.value,'r_hr1',0,3,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_hr1',0,3,'tbl1')" maxlength="1" value="3" onfocus="return selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_bnt1_hid">3</span>
<input name="r_bnt1" type="text" class="txt_fid" id="r_bnt1" onBlur="return chk_txtval(this.value,'r_bnt1',0,4,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_bnt1',0,4,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_ph1_hid">3</span>
<input name="r_ph1" type="text" class="txt_fid" id="r_ph1" onBlur="return chk_txtval(this.value,'r_ph1',0,5,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_ph1',0,5,'tbl1')" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_run1_hid">3</span>
<input name="r_run1" type="text" class="txt_fid" id="r_run1" onBlur="return chk_txtval(this.value,'r_run11',0,6,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_run11',0,6,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td width="44" align="left" ><span style="display:none;">11</span>
<select name="psvsl_select" class="psvsl_sel_class" id="psvsl_select111904" style="width:40px;" >
<option value=""></option>
<option value="lineup" >Lineup</option>
<option value="bench" >Bench</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="senddown">Send Down</option>
</select></td>
<td align="center" valign="top" ><span style="display:none;" id="l_hr1_hid">3</span>
<input name="l_hr1" type="text" class="txt_fid" id="l_hr1" onBlur="return chk_txtval(this.value,'l_hr1',0,8,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_hr1',0,8,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_bnt1_hid">3</span>
<input name="l_bnt1" type="text" class="txt_fid" id="l_bnt1" onBlur="return chk_txtval(this.value,'l_bnt1',0,9,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_bnt1',0,9,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_ph1_hid">3</span>
<input name="l_ph1" type="text" class="txt_fid" id="l_ph1" onBlur="return chk_txtval(this.value,'l_ph1',0,10,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_ph1',0,10,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_run1_hid">3</span>
<input name="l_run1" type="text" class="txt_fid" id="l_run1" onBlur="return chk_txtval(this.value,'l_run1',0,11,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_run1',0,11,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
</tr>
</tbody>
</table>
Upvotes: 0
Views: 1386
Answers (2)
Anthony
Reputation: 37045
How about stripping this down a bit to see if the issue is with the property in IE or something else. Does the following work?
HTML:
<table class="tablehead" id="pls-batting">
<thead>
<tr class="tab_head" id="pls-play">
<th># vs.R</th><th class="tab_space">PLAYER</th>
</tr>
</thead>
<tbody>
<tr class="oddrow player-10-5544" id="111904">
<td>11</td>
<td class="box tb1hide" style="max-width: 124px;">Cameron, Mike (FLA)fdgdsgfdtertwet dgfs aesfaesrf</td>
</tr>
</tbody>
</table>
CSS:
.tablehead th{
border-bottom: 1px solid #C2C2C2;
color: #FFFFFF; background-color:#000058;
font-size: 13px; font-family:calibri!important;
font-weight: 700;
}
.tab_head th.tab_space {
padding-left: 5px;
}
.box {
text-overflow:clip!important;
overflow:hidden!important;
white-space:nowrap!important; table-layout:fixed!important;
-o-text-overflow: clip!important;
}
*html .box {
width: expression( document.body.clientWidth > 124 ? "124px" : "auto" ); /* sets max-width for IE */
}
It's hard to determine in it's built-out state what's relevant and what isn't, with the inline styles, onmousehovers, etc. One of these could be at fault, but best to start with the stuff that is supposed to be working to make sure it is.
My guess is that the expression isn't working, but that's just a guess.
Upvotes: 0
Joel Eckroth
Reputation: 2534
I was able to get it working with the following:
table{
table-layout: fixed;
}
Upvotes: 1