表和td宽度问题

时间:2012-03-09 06:34:04

标签: html css html-table

这适用于Firefox和Chrome,但不适用于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="">&nbsp;</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="">&nbsp;</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>

2 个答案:

答案 0 :(得分:1)

我能够使用以下内容:

table{
    table-layout: fixed;
}

答案 1 :(得分:0)

如何解决这个问题,以查看问题是否与IE中的属性或其他内容有关。以下是否有效?

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 */
}

很难确定它的内置状态是什么相关和什么不相关,内联样式,onmousehovers等等。其中一个可能是错误的,但最好是从应该是的东西开始努力确保它。

我的猜测是表达不起作用,但这只是猜测。