"HTML side door left" Sixth day: form line production technique

xiaoxiao2021-03-06  39

The production technique of the table line, we now have a data form, I hope that every cell is surrounded by a black line, so how? As shown in the figure below: This topic related pictures First we use the classic "21 rule": that is, Cellpadding is 2, Cellspacing is 1, the table background has colors, TD set background color, using the gap between the tables to add a cross wire

make the effect more obvious, and of course I will give an Example download. This is the method that N years has been using, easy to use, but now emphasizes style separation, OK, in order to catch up, let us use CSS to do this. CSS method 1: Imitation "21 Special" form is still that form, in order to facilitate our name to the form

Because you don't want to post too long, please manually add some
OK, this is a clean form, we Use CSS to define him

# Table1 {background-color: # 000000; // Table overall background black, the color width: 500px between the gap; Padding: 0px; border-spacing: 1px; // Table 1 PX} # Table1 TD {Background -Color: #fffffff;} However, you will find that the table line will appear very thick under IE. . . Since IE is not enough to support CSS2 standard, it is not like expected (advertising time: I recommend Mozilla browser here :)) So how to use CSS to display normal in all browsers? And do not use this gap method, but use Border to do it :), the OK answer is below. Re-establish a form ID = "Table2"

# Table2 {border: 1px solid # 000000; // For Table Outside Picture Width: 500px; Padding: 0px; Border-Collapse: Collapse; // Some lines will be drawn twice due to the TD around the line, so some lines will be drawn twice. Thin, use this attribute, can automatically merge the same type border-spacing: 0px; // There is no void room between the table} # Table2 Td {border: 1px solid # 000000; / / Trope CSS and "21 rule "The effect is exactly the same, IE and Mozill are normal, and the style is detached from the form :) Full code download: This topic related files 102537.zip

You want to comment on this theme, please: http://www.faridea.com/bbs/announce/announce.asp? BoardId = 301 & id = 3923 & aupflag = 1 & anum = 1

转载请注明原文地址:https://www.9cbs.com/read-78430.html

New Post(0)
CopyRight © 2020 All Rights Reserved
Processed: 0.035, SQL: 9