[Document of the institute of Fire Station Building] CSS tutorial, go straight to the subject, now there is such a table:
When moving the cursor over the transaction content area, highlight the background of the current row.
1. Create a standard HTML document structure
When talking about the standard HTML structure, some people may say, well, with the div tag, there are more sets of li in it, and finally a float with css can be arranged in this structure. In fact, the standard structure is not to say that div must be used for layout, but to use semantic HTML tags as much as possible. In the definition of HTML tags, div and span are actually two labels without semantics, while table has the semantics of data tables.
So here we will try to build a document structure that complies with the XHTML 1.0 Strict standard. The following is the HTML code of the table structure:
Note the following:
You must use <thead/>, <tbody/>, and <tfoot/> labels to indicate the header area, table body content, and table bottom area respectively.
You should use <th/> instead of <td/>
<Tfoot/> the tag block should be between <thead/> and <tbody/>. Otherwise, it cannot pass W3C tag verification.
Add a style to them:
. TableList {
Border: 2px #666 solid;
}
. TableList td,. tableList th {
Border: 1px #666 solid;
Padding: 5px 25px;
}
. TableList tfoot td {
Text-align: right;
}
. FastpayIcon {
Background: transparent url (http://img.alipay.com/pimg/icon_fastpay16.gif) no-repeat scroll 5px 5px;
}
2. Smooth the table row over the highlighted background
What should we do to achieve the highlighted Effect of table row sliding? Yes. You can use JS to handle several onmouseover and onmouseout operations. However, to comply with the WEB standards, we should actually use the hover pseudo class of CSS for implementation. Add this CSS rule in the <style/> section:
. TableList tbody tr {
Background: # fff;
}
. TableList tbody tr: hover {
Background: # eee;
}
In this way, most standard browsers can achieve this effect. Next, consider compatibility issues. Write a piece of JS for IE6 to achieve this effect.
<! -- [Endif] -->
Note the following:
Use IE condition comments <! -[If lt IE 7]> to ensure that this JavaScript code will only run in IE browsers earlier than IE7, because for most browsers, this JS Code is superfluous.
3. Code compatibility test
Next, we will test the compatibility of this Code in various browsers. IETester is recommended for testing IE compatibility of each version, followed by FF2/FF3.
The test found that the first cell with a background image in IE6 and IE7 could not achieve this effect, and IE8 and FF did not. The reason for the analysis is that
. FastpayIcon {
Background: transparent url (http://img.alipay.com/pimg/icon_fastpay16.gif) no-repeat scroll 5px 5px;
}
The CSS definition in this section is equivalent:
. FastpayIcon {
Background-attachment: scroll;
Background-color: transparent;
Background-image: url (http://img.alipay.com/pimg/icon_fastpay16.gif );
Background-repeat: no-repeat;
Background-position: 5px 5px;
}
This is because the background-color: transparent is defined as transparent, but the debugging shows that IE has a BUG in support of td's background-color. When it is set to transparent, in fact, the effect of # fff is realized. The solution is to delete the definition of background-color for td, or set the attribute value to inherit, so that td will inherit this attribute from its parent element tr to achieve the effect.
