I. Control scrolling in the table y direction via CSSThere are no scroll bars in the HTML, and you can scroll through the scroll of the overflow property to display incomplete content on the table.just scroll in the y direction, very simple, as long as the height of the div is set. Then set the Overflow-y:scroll. When the content height is higher than the height setting, a scroll bar appears CSS: . scroll_y{
max-height:200px;
/* Width is approximately 17px wider than the table header, the actual value is debugged */
width:531px;
OVERFLOW-Y: scroll;
}Code:
Two. Control scrolling in table x, y direction via CSSScroll in the x direction. The table width must be set, and the scroll bar is displayed when the width is exceeded. 1. The overflow property of the table div for the header is set to the Hidden,height property to control the display width . top-div{
width:500px;
Overflow:hidden;
}2. The overflow property of the table div shown below is set to the Scroll,height property to control the display width (width of one scroll bar wider than the width of the table header) . right-div{
width:517px;
Overflow:scroll;
max-height:200px;
}the Onscroll event in 3.javascript or the scroll event in jquery controls when the table scrollbar below shows the scroll bar in the x direction, and the header tables also scroll in the x direction <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> The specific code is as follows:
three. Table Widththe above two pieces of code are different on the table's settings: The second example of CSS style Table.item will table-layout:fixed removed. Because if we don't get rid of it. The display effect is the following
the table width setting for the header above is invalid. You can see the width of the previous merged header "technical Department" "Marketing department" "Finance department" is consistent. The Width property does not take effect. 1. Analysis of the following table-layout:The default property is auto. After you set the column width. When all content in a table column is not longer than the Set column width. Then the column width is the set width value. Otherwise, column widths are the longest in this column. That is, the column width is determined after all the line content has been loaded. fixed-out: After set to Fixed-out. Column widths are determined by setting the width value of this column and the table widths. The table display is independent of the contents of the table. So the browser can display the data when it receives the first line. supplement the actual column width value calculation: Add the width of the table to be set to 100px,200px.300px by three columns width to 1200px. then the column width of the actual table should be 100/(100+200+300) *1200=200px, 400px,600px. based on the above analysis. When the table-layout:fixed attribute is removed. The table is displayed normally, plus the exception. Note that the root of the problem above is the width of the column.
2. Analysis of the colspanthe table header above tables and the contents below are the same as the table CSS style. Why is there such a problem with the table above? And the table below shows normal. There is no column merge by replacing the table above with the regular table. found no such problem. Then the key to the problem is colspan.in 1 kinds have been analyzed for fixed-out. How the column width is determined. All column widths are determined by the first row. So the section below the "technical department" "Marketing department" "Finance department" width is the same (this line is the second line) at this point, the problem analysis ends.
3. Solutionbased on the above analysis. The solution has a total of two1) Remove the Table-layout:fixed-out attribute 2) Use Colgroup to determine the column width in advance. <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 Control table slide and adjust column width and other issues summary
