当我选择一个下拉列表时，我想隐藏一个表中的特定行而不移动另一个表。如何固定表格，以便在隐藏某些内容后不会移动？我想在左下方的桌子上添加spacer，但它仍然在Chrome / IE 10中移动。需要它适用于这两种浏览器。
这是小提琴：http://jsfiddle.net/xha4tb74/4/ 我选择数据库字段时调用行的更改。
onchange="database_details();"
答案 0 :(得分：1)
你只是希望桌子在顶部保持对齐吗？如果是这样，你可以在td上设置valign属性。
以下代码并在此处更新了小提琴：http://jsfiddle.net/xha4tb74/6/
<body>
<form action="GenerateTDE" method="post" id="inputForm" class="pure-form h5-defaults pure-form-stacked">
<table align="center" style="width:1300px;">
<td valign="top">
<table>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">Database Details</span>
</th>
</tr>
<tr>
<th>* Database</th>
<th class="th_background">
<select id="database" class="form-control" name="database" onchange="database_details()">
<option value="oracle" selected="selected"><b>Oracle</b>
</option>
<option value="mssql"><b>Sql Server</b>
</option>
<option value="teraData"><b>TeraData</b>
</option>
<option value="epic"><b>Generic ODBC(Chronicles)</b>
</option>
<option value="sas"><b>SAS</b>
</option>
</select>
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"></th>
</tr>
<tr class="servicerow">
<th>* Service ID</th>
<th class="th_background">
<input type="text" id="sidText" name="sid" class="form-control" style="width: 100%" placeholder="Enter SID">
</th>
</tr>
<tr class="portrow">
<th>* Port</th>
<th class="th_background">
<input type="text" id="portText" name="port" class="form-control" style="width: 30%" value="1521" placeholder="Enter port">
</th>
</tr>
<tr class="dbNamerow">
<th>* DB Name</th>
<th class="th_background">
<input type="text" id="dbText" name="dbName" style="width: 100%" class="form-control" placeholder="Enter database name">
</th>
</tr>
<tr class="dbdnsrow">
<th>* DB DNS Name</th>
<th class="th_background">
<input type="text" id="dnsText" name="url" style="width: 100%" class="form-control" placeholder="Enter DNS">
</th>
</tr>
<tr class="librefsrow">
<th>* Lib Refs</th>
<th class="th_background">
<input type="text" id="librefs" name="librefs" style="width: 100%" class="form-control" placeholder="Enter Librefs">
</th>
</tr>
<tr class="hostrow">
<th>* Host</th>
<th class="th_background">
<input type="text" id="hostText" name="host" style="width: 100%" class="form-control" placeholder="Enter host Name">
</th>
</tr>
<tr class="userrow">
<th>* Database User</th>
<th class="th_background">
<input type="text" id="userText" name="user" style="width: 100%" class="form-control" placeholder="Enter user Name">
</th>
</tr>
<tr class="passwordrow">
<th>* Database Password</th>
<th class="th_background">
<input type="password" id="passwordText" style="width: 100%" name="password" class="form-control" placeholder="Enter database password">
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">* Name of TDE File</span><span data-toggle="tooltip" title="TDE Name should be unique for a site and project"><i class="fa fa-question-circle"></i></span>
</th>
</tr>
<tr>
<th>Enter new TDE Name
<br>Or
<br>Select from already existing TDEs</th>
<th class="th_background">
<input type="text" id="tdeNameText" onclick="resetTDENameDropdown();" onblur="validateTdeName();" name="tdeName" style="width: 100%" class="form-control" placeholder="Enter TDE Name">Or
<br>
<select id="tdeNameDropDown" class="form-control" name="tdeNameDropDown" onchange="clearTDEName();">
<label for="tdeNameDropDown"></label>
<option value="">---Select TDE Name---</option>
</select>
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;"></span>
</th>
</tr>
<tr>
<th>* Job Name <span data-toggle="tooltip" title="Job name should be unique for a user"><i class="fa fa-question-circle"></i></span>
</th>
<th class="th_background">
<input type="text" id="jobName" name="jobName" class="form-control" placeholder="Enter Job Name" style="width: 100%" required onblur="validateJobName();">
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;"><input type="checkbox"
name="scheduler" id="scheduler" value="yes"
onclick="hide_time();"> Schedule TDE Generation Job </span>
</th>
</tr>
<tr>
<th>* Schedule List</th>
<th class="th_background">
<select id="cronSchedule" class="form-control" name="cronSchedule" disabled>
<label for="cronSchedule"></label>
<option value="">---Select Schedule</option>
</select> <a href="/TableauDataExtractApp-1/scheduleMainPage.jsp">Create
Schedule</a>
</th>
</tr>
<tr id="filler" style="border-bottom: #d8d8d8 .1px solid;">
<th style="height: 49px;visibility: hidden;">filler</th>
</tr>
</table>
</td>
<td>
<table style="margin-top:6px !important;">
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">TDE Refresh Options</span>
</th>
</tr>
<tr>
<th class="th_background">
<input type="radio" name="refreshTde" value="yes" checked> <span data-toggle="tooltip" title="This option creates new TDE or replaces existing TDE file with full data.">Full
Refresh <i class="fa fa-question-circle"></i></span>
</th>
<th class="th_background">
<input type="radio" name="refreshTde" value="no"> <span data-toggle="tooltip" title="This option appends existing TDE. Should have same data items in the SQL.">Incremental
Refresh <i class="fa fa-question-circle"></i></span>
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">* SQL Query to Generate TDE</span>
</th>
</tr>
<tr>
<th class="th_background">
<input type="radio" id="query_upload" name="group1" onclick="sql_toggle();">Upload SQL File</th>
<th class="th_background">
<input type="radio" id="query_radio" name="group1" onclick="sql_toggle();">SQL Query</th>
</tr>
<tr class="uploadSQL">
<th class="th_background" colspan="2">
<input type="file" style="display: inline;" name="queryUpload" id="upload_querys">
<input type="button" onclick="formatSQL();" id="formatButton" value="Format SQL"></input>
</th>
</tr>
<tr class="textSQL">
<th colspan="2" style="background-color: #0072bc;">
<textarea rows="29" style="width: 100% !important;" id="query" placeholder="Enter query" name="query" required></textarea>
</th>
</tr>
</table>
</td>
</tr>
<tr style="
border-bottom: none;
">
<th colspan="4">
<center>
<input type="submit" class="pure-button pure-button-primary" value="Generate TDE">
<input type="button" value=" Reset " class="pure-button pure-button-primary" onclick="resets();">
</center>
</th>
</tr>
</table>
</form>