[DIV CSS] Draw 2-fold crosstab_html/css_WEB-ITnose

A few years ago, there was a need to generate a crosstab on the Web. However, because CSS Div was not yet popular at that time, the table table was tossed on the page. In the end, it could only reach the level of a double crosstab. , however, its versatility and readability are poor, and it is not easy to maintain. So following the Css Div layout trend, the crosstab (2-fold, 3-fold...multiple) was rewritten and used in the project. Here Let’s organize it.

Let’s talk about the 2-fold crosstab first
First establish the structure:

 

>                                                                                                                                   When the table side and the header can scroll at the same time. The code is very simple.
function scrollDiv() {
document.getElementById('theadR').scrollLeft = document.getElementById('tbodyR').scrollLeft;
        document.getElementById('tbodyL').scrollTop = document.getElementById('tbodyR').scrollTop;                                                                                                                    Define the margins of the layer table margin-left:20px;margin-bottom:15px;
Then there are the inner 4 blocks
The upper left header is the simplest, but it is also very important. Its height corresponds to the right header The height and width correspond to the width of the table side. As for the outer border, add it as needed.
.table .theadL{top:0px;left:0px;width:300px;height:103px;background:Silver;border-top :solid 1px black;border-left:solid 1px black;}

The upper right header is mainly to align with the vertical lines of the table body, so the column widths are all set to dead, divs are set in the columns and overflow is set: hidden.
The same goes for the table side and the height is set to be the same as the table body column height.

The style of the table side part is simple. Just set the following inner div height, width and overflaw:hidden to ensure that the content is not beneficial. Just fine.

.table .tbodyL{top:103px;left:0px;width:300px;height:250px;border-bottom:solid 1px black;border-right:solid 1px black;}
.table .theadR{top:0px;left:299px;width:500px;height:103px;border-top:solid 1px black;border-top:solid 1px black; }
.table .tbodyR{top:103px ;left:300px;width:517px;height:267px;}

The effect is as follows:
Simplify complex WEB design issues.
Continue to learn....

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn