這個功能我只要點擊按鈕后，表頭沒有鋪滿，會縮小。這是為什么，杠打開頁面表格會鋪滿。
只要執行bumenGuanli()和renyuanGuanli()方法后，表頭會縮小，沒有搞懂。
<!-- 表格部分 -->
<div id="container" class="all_table"> <!-- 頭部 -->
<!-- 部門管理整個表 -->
<table id="bumenTable" class="table">
<!-- 表頭 -->
<thead class="fixedThead" id="dataTable" width="100%">
<tr class="header">
<th><input type="checkbox" name="checkId" class="checkbox" id="cekall" ></th>
<th>序</th>
<th>組織名稱</th>
<th>常規操作</th>
</tr>
</thead>
<tbody class="table_page" id="table_page3" >
<!-- <tr>
<td><input type="checkbox" name="checksId" class="checkbox" id="cekalls"></td>
<td>1</td>
<td>GLZ1_01</td>
<td>GH020</td>
<td>
</td>
</tr> -->
</tbody>
</table>
<!-- 用戶管理整個表 -->
<table id="renyuanTable" class="table" style="display: none;">
<!-- 表頭 -->
<thead class="fixedThead" id="dataTable" width="100%" > <!-- cellspacing="0"-->
<tr class="header">
<th><input type="checkbox" name="checkId" class="checkbox" id="cekall" ></th>
<th>序</th>
<th>姓名</th>
<th>所屬組織機構名稱</th>
<th>聯系電話</th>
<th>常用操作</th>
</tr>
</thead>
<tbody class="table_page" id="table_page3" >
<!-- <tr>
<td><input type="checkbox" name="checksId" class="checkbox" id="cekalls"></td>
<td>1</td>
<td>GLZ1_01</td>
<td>GH020</td>
<td>已登記</td>
<td>管理組一</td>
<td>
</td>
</tr> -->
</tbody>
/* 表格內容部分 */
.all_table{
border-collapse:collapse;
margin-left: 15px;
margin-top:15px;
background-color: #D8DEE5;
width: 95%;
border-radius: 3px; /* 邊框圓角 */
}
.table{
width: 100%; /* 表的寬度 */
/* border-collapse:collapse; */
border-spacing:0;
margin-left: 0px;
align-self: auto;
text-align: center;
}
.fixedThead{ /* 表頭 */
background-color:#35618E;
border-style:solid;
border-width:1px;
}
#dataTable th{ /* 表頭文字 */
color: #93B9DE;
}
/* 表頭下的表格內容 */
#table_page3 tr{ /* 表頭下 */
background-color: #FCFDFD;
color: #414C5E;
border-top: 1px solid #D6DBDF;
border-bottom: 1px solid #D6DBDF;
}
/* 滑鼠移動過 tr 時添加背景 */
#table_page3 tr:hover{
background-color: #E6F1FD;
}
/* 部門管理點擊 */
function bumenGuanli(){
document.getElementById("zhanshiqu").innerHTML = "部門資訊";
document.getElementById("nav_module_biaoti").style.backgroundColor = "#35618E";
document.getElementById("nav_module_renyuan").style.backgroundColor = "#21395B";
document.getElementById('renyuanTable').style.display = "none";
document.getElementById('bumenTable').style.display = "block";
document.getElementById('renyuanguanlitext').style.display = "none";
document.getElementById('bumenguanlitext').style.display = "block";
document.getElementById('renyuanguanlibutton').style.display = "none";
document.getElementById('bumenguanlibutton').style.display = "block";
}
/* 用戶管理點擊 */
function renyuanGuanli(){
document.getElementById("zhanshiqu").innerHTML = "用戶資訊";
document.getElementById("nav_module_renyuan").style.backgroundColor = "#35618E";
document.getElementById("nav_module_biaoti").style.backgroundColor = "#21395B";
document.getElementById('bumenTable').style.display = "none";
document.getElementById('renyuanTable').style.display = "block";
document.getElementById('bumenguanlitext').style.display = "none";
document.getElementById('renyuanguanlitext').style.display = "block";
document.getElementById('renyuanguanlibutton').style.display = "block";
document.getElementById('bumenguanlibutton').style.display = "none";
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/204115.html
標籤：HTML(CSS)