隐藏表格的行后,表格变形了(help!~)<table  cellspacing="1" id="ShippingTable" border='1'>
<colgroup>
<col style="width:100px" />
<col style="width:70px" />
<col style="width:90px" />
<col style="width:80px" />
</colgroup>
<tr  id="ShippingAddressRow">
<td  colspan="4">Shipping Address</td>
</tr>
<tr  id="ShippingCompanyNameRow">
<th >Company : </th>
<td colspan="3" >
<!-- same problem   -->
<input type="text" id="ShippingCompanyName" name="ShippingCompanyName"  size="35" maxlength="50" onkeydown="onchengeAddress('Left');" value="" />
<span id="ShippingCompanyNameMessage" ></span>
</td>
</tr>
<tr  id="ShippingNameRow">
<th >First name : </th>
<td >
<input type="text" id="ShippingFirstName" name="ShippingFirstName"  size="10" maxlength="20" onkeydown="onchengeAddress('Left');isAddress()"  value="" />
</td>
<th >Last name : </th>
<td >
<input type="text" id="ShippingLastName" name="ShippingLastName"  size="7" maxlength="20" onkeydown="onchengeAddress('Left');isAddress()"  value="" />&nbsp;
</td>
</tr>
<tr  id="ShippingTelRow">
<th >Telephone : </th>
<td colspan="3">
<input type="text" id="ShippingTel" name="ShippingTel"  size="35" maxlength="20" onkeydown="onchengeAddress('Left');isAddress()"  value="" />

</td>
</tr>
<tr  id="ShippingAddressRows">
<th >Address : </th>
<td colspan="3">
<input type="text" id="ShippingAddress" name="ShippingAddress"  size="35" maxlength="100" onkeydown="onchengeAddress('Left');isAddress()"  value="" />
</td>
</tr>
<tr  id="ShippingAddress2Rows">
<th ></th>
<td colspan="3">
<input type="text" id="ShippingAddress2" name="ShippingAddress2"  size="35" maxlength="100" onkeydown="onchengeAddress('Left');isAddress()"  value="" />
</td>
</tr>
<tr  id="ShippingStatesRow">
<th >City:</th>
<td >
<input type="text" name="ShippingCity" id="ShippingCity"  size="17" maxlength="25" value="" onkeydown="onchengeAddress('Left');isAddress()"/><span id="ShippingCityMessage" ></span>
</td>
<td  colspan="2">State:<select  onchange="isAddress();onchengeAddress('Left');"    name="ShippingStateSn"  id="ShippingStateSn"><option selected value="0">Select...</option><option  value="12">Alabama</option><option  value="14">Alaska</option><option  value="16">Arizona</option><option  value="18">Arkansas</option><option  value="8">California</option><option  value="20">Colorado</option><option  value="22">Connecticut</option><option  value="24">Delaware</option><option  value="26">Florida</option><option  value="28">Georgia</option><option  value="30">Hawaii</option><option  value="32">Idaho</option><option  value="34">Illinois</option><option  value="36">Indiana</option><option  value="38">Iowa</option><option  value="40">Kansas</option><option  value="42">Kentucky</option><option  value="44">Lousiana</option><option  value="46">Maine</option><option  value="48">Maryland</option><option  value="50">Massachusetts</option><option  value="6">Miami</option><option  value="52">Michigan</option><option  value="54">Minnesota</option><option  value="56">Mississippi</option><option  value="58">Missouri</option><option  value="60">Montana</option><option  value="62">Nebraska</option><option  value="64">Nevada</option><option  value="66">New Hampshire</option><option  value="68">New Jersey</option><option  value="70">New Mexico</option><option  value="5">New York</option><option  value="72">North Carolina</option><option  value="74">North Dakota</option><option  value="3">Ohio</option><option  value="76">Oklahoma</option><option  value="78">Oregon</option><option  value="80">Pennsylvania</option><option  value="82">Rhode Island</option><option  value="84">South Carolina</option><option  value="86">South Dakota</option><option  value="88">Tennessee</option><option  value="90">Texas</option><option  value="92">Utah</option><option  value="94">Vermont</option><option  value="96">Virginia</option><option  value="98">Washington</option><option  value="100">West Virginia</option><option  value="102">Wisconsin</option><option  value="104">Wyoming</option></select>&nbsp;
</td>
</tr>
<tr  id="ShippingCountryRow">
<th >Zip Code:</th>
<td>
<input type="text" name="ShippingZipCode" id="ShippingZipCode"  onkeyup="copyZip(0)" maxlength="8" maxlength="7" size="8"  value="" onkeydown="onchengeAddress('Left');isAddress()" />
</td>
<td  colspan="2">Country:<select  onchange="switchStates(this.value, 'ShippingStateSn'); isAddress();onchengeAddress('Left');copyCountry(0);"    name="ShippingCountrySn"  id="ShippingCountrySn"><option  value="0">Select...</option><option  value="7">Canada</option><option selected value="4">USA</option></select>&nbsp;
<span id="ShippingCountryMessage" ></span>
</td>
</tr>
<tr id="ShippingMessageRow">
<td></td>
<td colspan="3" >
<span id="ShippingMessage" name="ShippingMessage" ></span>
</td>
</tr>
<tr  >
<td colspan="2" id="UnimportantInfo" >
<a href="#" id="UnimportantInfoAhref" onclick="showUnimportantInfo()"> [ UnimportantInfoAhref ] </a>
</td>
<td colspan="2" id="DuplicateRightRow" >
<a href="#" id="DuplicateRightAhref" > [ Duplicate Right ] </a>
</td>
</tr></table><script>var b_flag = 0;
function $(id) {
return document.getElementById(id);
}
function showUnimportantInfo() {
if(b_flag) {
$('ShippingCompanyNameRow').style.display = '';
$('ShippingNameRow').style.display = '';
$('ShippingTelRow').style.display = '';
//$('BillingCompanyNameRow').style.display = '';
//$('BillingNameRow').style.display = '';
//$('BillingTelRow').style.display = '';
b_flag = 0;
} else {
$('ShippingCompanyNameRow').style.display = 'none';
$('ShippingNameRow').style.display = 'none';
$('ShippingTelRow').style.display = 'none';
b_flag = 1;
}
}
</script>我点击[ UnimportantInfoAhref ]隐藏ShippingCompanyNameRow, ShippingNameRow, ShippingTelRow
后表格被拉大了
再点击后显示,我想知道什么原因把这个表格给拉大了

解决方案 »

  1.   

    和ShippingNameRow隐藏后只剩下3列有关,建议在table中定一下width
      

  2.   

    <colgroup>
    <col style="width:100px" />
    <col style="width:70px" />
    <col style="width:90px" />
    <col style="width:80px" />
    </colgroup>我用这个限制了四列的宽度还是不行,
    FF和google下是正常的
      

  3.   

    很正常,隐藏行实际上它还是存在占一定的空间的。最好只隐藏你要隐藏的内容,而不需要把<tb><tr>等标签也隐藏了。