CSS removes the default table spacing and creates a 1px line table.

Source: Internet
Author: User

Now, in the so-called "div + css" atmosphere, many people give up the table, in fact, we should make the best use of each tag, where the data is presented, we should still use the table. However, when creating a table, we will find that it has some default styles. For example, there is a gap between the cell td, so we usually start with this:

The code is as follows: Copy code
<Table border = "0" cellspacing = "0" cellpadding = "0">
In the page, use cellspacing = "0" to remove the spacing and merge the border. Now, we need a clean table.
<Table class = "dir">
<Caption> How to use CSS to remove the spacing of default table styles </caption>
<Tr>
<Th> test </th>
<Th> test </th>
<Th> test </th>
</Tr>
<Tr>
<Td> test </td>
<Td> test </td>
<Td> test </td>
</Tr>
</Table>

We only need to give this table a border-collapse: collapse style to achieve this effect.

The code is as follows: Copy code
. Dir {width: 100%; border-left: # C8B9AE solid 1px; border-top: # C8B9AE solid 1px; border-collapse: collapse ;}
. Dir td {width: 25%; border-right: # C8B9AE solid 1px; border-bottom: # C8B9AE solid 1px; background-color: # D7D1CB; padding: 10px 10px 6px; vertical-align: top ;}

In this way, we have achieved the desired effect, and the css style above also defines the table as a 1px line table.
Without the internal style definition of the table, the style table is used to successfully remove the default td spacing and a line table defined as 1 pixel. Truly achieves the separation of structure and performance.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.