標籤：html+css table 滾動scroll colspan 列寬不起作用
一. 通過css控制table y方向上滾動html中沒有捲軸，可以根據overflow屬性的scroll來對table顯示不完全的內容進行滾動.只是y方向上滾動，很簡單,只要設定div的height高度。然後設定overflow-y:scroll。這樣當內容高度超過了height設定的高度，就會出現捲軸css:.scroll_y{
max-height: 200px;
/* 寬度大概比表頭寬17px，具體值實際調試 */
width:531px;
overflow-y: scroll;
}代碼：
二.通過css控制table x,y方向上滾動x方向上滾動。則必須設定表格寬度，當超過設定寬度後就顯示捲軸。1.對於表頭的table div 的overflow屬性設定為hidden，height屬性控制顯示寬度.top-div{
width:500px;
overflow:hidden;
}2. 下面顯示部分的table div的overflow屬性設定為scroll，height屬性控制顯示寬度(比表頭的寬度寬一個捲軸的寬度).right-div{
width:517px;
overflow:scroll;
max-height:200px;
}3.javascript 中onscroll事件或jquery中scroll事件來控制當下面顯示部分表格捲軸沿x方向滾動時，表頭table也沿x方向滾動<script type="text/javascript">
var $top=document.getElementById("top-div");
var $right=document.getElementById("right-div");
function scroll(){
$top.scrollLeft = $right.scrollLeft
}
$right.onscroll=scroll;
</script>具體代碼如下：
三. 表格寬度上面兩段代碼是在table的設定上是有差異的：第二個例子的css 樣式table.item將table-layout:fixed去除掉了。因為如果不去除掉。顯示效果是下面這樣的
上面表頭的table寬度設定無效了。可以看到前面合并表頭【技術部】【市場部】【財務部】的寬度一致了。width屬性不生效了。1. 分析下table-layout:預設屬性是auto。設定列寬後。當表列中的所有內容長度都不超過設定的列寬。那麼列寬就是設定的width值。否則列寬是此列中內容最長的寬度。也就是說列寬的確定是在載入完所有行內容之後確定。fixed-out：設定為fixed-out後。列寬就由設定此列的width值，表格寬度來決定。表格顯示與表格的內容無關。所以瀏覽器能夠在接收到第一行就顯示資料。補充實際列寬值計算:加入由三列 width分別設為 100px,200px.300px.而將table的寬度設為1200px.那麼實際table的各列寬度應該是 100/(100+200+300)*1200=200px ,400px,600px.基於以上分析。當去掉table-layout：fixed屬性。表格正常顯示，加上則異常。說明出現上述問題的根本是列的寬度。
2.分析下colspan 上面的表頭table和下面的內容table css樣式相同。為什麼上面的table會出現那樣的問題。而下面的table顯示正常呢。 通過將上面的table 替換成常規table，即沒有列合并。發現不存在上述問題。那麼說明問題的關鍵就是colspan了 在1種已經分析了對於fixed-out.列寬是如何確定的。所有列寬都是由第一行確定的。所以部門下面的【技術部】【市場部】【財務部】的寬度是一樣(這行是第二行了) 到此，問題分析結束。
3.解決方案 基於以上分析。解決方案有兩個 1)去掉table-layout:fixed-out屬性 2)使用colgroup提前確定好列寬。<colgroup>
<col class="techDepartment"></col>
<col class="marketDepartment"></col>
<col class="financeDeparment"></col>
<col class="name"></col>
<col class="age"></col>
<col class="from"></col>
<col class="level"></col>
</colgroup>
CSS 控制table 滑動及調整列寬等問題總結
