After several days of study, I learned a little about the ideas and benefits of div + css website layout.
ConfuseLing sent me a piece of code to lock the title and first col css, but it is not good in user experience. I sorted it out. Let's get down to the truth and talk about this implementation directly.
Test.css:
. FirstRow {...}{
Background-color: # CC9900;
Top: expression (this. offsetParent. scrollTop );
Z-index: 10;
Position: relative;
}
. Corner {...}{
Background-color: # CC9900;
Z-index: 10;
Left: expression (this. parentElement. offsetParent. scrollLeft );
Top: expression (this. offsetParent. scrollTop );
Position: relative;
}
. FirstCol {...}{
Background-color: white;
Z-index: 10;
Left: expression (this. parentElement. offsetParent. scrollLeft );
Position: relative;
}
. Relative {...}{
Position: relative;
}
Div {...}{
Overflow: auto;
Width: 300px;
Height: 150px;
}
Tr {...} {height: 50px ;}
Test.html:
<Html>
<Head>
<Title> test css </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = shift_jis">
<Link href = "test.css" type = "text/css" rel = "stylesheet">
</Head>
<Body>
<Div>
<Table border = "1px" cellpadding = "0" cellspacing = "0" width = "500px">
<Tr class = "firstRow">
<Td class = "corner"> 1th Row </td>
<Td class = "relative"> 1th Row </td>
<Td class = "relative"> 1th Row </td>
<Td class = "relative"> 1th Row </td>
<TD class = "relative"> 1th row </TD>
</Tr>
<Tr class = "relative">
<TD class = "firstcol"> 2th row </TD>
<TD> 2th row </TD>
<TD> 2th row </TD>
<TD> 2th row </TD>
<TD> 2th row </TD>
</Tr>
<Tr class = "relative">
<TD class = "firstcol"> 3th row </TD>
<TD> 3th row </TD>
<TD> 3th row </TD>
<Td> 3th Row </td>
<Td> 3th Row </td>
</Tr>
<Tr class = "relative">
<Td class = "firstCol"> 4th Row </td>
<Td> 4 th Row </td>
<Td> 4 th Row </td>
<Td> 4 th Row </td>
<Td> 4 th Row </td>
</Tr>
</Table>
</Div>
</Body>
</Html>
This user experience is not good, especially after scroll, there is a slight margin on the image edge. Is it possible to kill table border and set cell border for each cell to solve this problem, today, I am not empty to discuss it.
In addition, the css expression does not support the latest css2.0 and html4.0 standards. Despite the latest Internet Explorer support, the program runs as expected after w3c standards are added.
Here we will introduce a software:
TopStyle Pro 3.0 can check whether css meets w3c web 2.0 standards.
At least because expression is used. The above Code cannot pass web 2.0:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"
"Http://www.w3.org/TR/html4/loose.dtd"> Standard
TopStyle Pro 3.0 Trial Registry cracking field:
HKU/S-1-5-21-1177238915-1580818891-1060284298-500/software/Microsoft/Windows/CurrentVersion/winshtrack
It's about daily computing. I don't know from that day, but you just need to add 1000 days to it.
UseRegshotAlthough the field found in the monitored C: // and registration subject changes is annoying, a trial box is displayed, but it can be used for a long time.