Wikipedia pretty table css_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-09 11:41 出处：网络

Can any one help me with the css to have a table that looks similar to this table? Thanks. Because I\'m using a WordPress.com blog, I don\'t have access to the <head>, so I\'ve taken Marty\'s a

相关专题：css

Can any one help me with the css to have a table that looks similar to this table? Thanks.

Because I'm using a WordPress.com blog, I don't have access to the <head>, so I've taken Marty's answer and converted it to this:

<table style="border-collapse: collapse;">
    <tbody valign="middle">
        <tr style="background: #EEE;">
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
            <td style="padding: 5px; border: 1px solid #开发者_运维百科AAA;">title</td>
        </tr>
        <tr>
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
        </tr>
        <tr>
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
        </tr>
    </tbody>
</table>

CSS:

table.mytable
{
    border-collapse: collapse;
}

table.mytable td
{
    padding: 5px;
    border: 1px solid #AAA;
}

tr.head
{
    background: #EEE;
}

HTML:

<table class="mytable">
    <tbody valign="middle">
        <tr class="head">
            <td>title</td>
            <td>title</td>
            <td>title</td>
        </tr>
        <tr>
            <td>content</td>
            <td>content</td>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
            <td>content</td>
            <td>content</td>
        </tr>
    </tbody>
</table>

The key ingredient here I think would be border-collapse.