Home > Web Front-end > HTML Tutorial > How to use CSS to achieve thin line table effect_html/css_WEB-ITnose

How to use CSS to achieve thin line table effect_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:40:39
Original
959 people have browsed it

How to use CSS to achieve a thin line table effect:

Although it is not recommended to use table when using layout, table is not an element that cannot be used, as long as it is used with CSS is still quite powerful when used properly, and using tables has more advantages than using divs in special situations, such as making tables, but the borders of the tables are ugly. Here's how to use CSS to achieve the effect of thin-line tables. . The code example is as follows:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">table{  width:300px;  height:60px;  background-color:green;}table td{  background-color:white;}</style></head><body><table cellspacing="1">  <tr>    <td>单元格</td>    <td>单元格</td>    <td>单元格</td>    <td>单元格</td>    <td>单元格</td>  </tr>  <tr>    <td>单元格</td>    <td>单元格</td>    <td>单元格</td>    <td>单元格</td>    <td>单元格</td>  </tr></table></body></html>
Copy after login

The above code can be displayed by setting the cellspacing attribute value of the table to 1px, then setting the background color of the table to green, and then setting the background color of the cell to white. Come out with a 1px "border" effect.

The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0504/725.html

The original address is: http://www.softwhy.com/ forum.php?mod=viewthread&tid=4645

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template