Question

任何人都可以帮助我使用css来创建一个类似于this table的表格吗？感谢。

由于我使用的是WordPress.com博客，因此我无法访问<head>，因此我已将Marty's answer转换为此内容：

<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>

Answer 1

<强> 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>

我认为这里的关键因素是border-collapse。

维基百科漂亮的表css

1 个答案: