Html table with double border?

How can I c开发者_如何学运维reate a table with double border: the outer border of 1 px and the inner border of 10px?

This border is only necessary on the table, not between cells.

Thank you.

---

Without adding extra tags that would break your semantics, I would recommend combining <table> and <tbody> and style them with CSS:

HTML:

<table id="cow">
    <tbody>
        <tr><td>Foo</td><td>Bar</td></tr>
        <tr><td>Foo</td><td>Bar</td></tr>
        <tr><td>Foo</td><td>Bar</td></tr>
    </tbody>
</table>

CSS:

#cow {
    border: 1px solid #000;
}

#cow tbody {
    display: block;
    border: 10px solid #ccc;   
}

Working example here.

An alternative approach would be to wrap your table in a containing <div> element. You would then apply the 1 pixel border to the <div> and the 10 pixel border to the <table>. This will definitely work, but will be a less semantic approach. Another downside to this is that the <div> width will default to the maximum width available, resulting in a larger 1 pixel border than your actual table width (see example).

---

you can take the table in a div tag and then give div tag 1px border and inner table 10 px border.

---

border-style: double; border-width: thin;