Question

我需要知道如何居中并跨越“MyTable”标题。可以用HTML（中心标签）和CSS来解决这个问题吗？我试着玩文字对齐，定位等，但我无法得到我想要的东西。

Table examples

<!DOCTYPE html>
<html>
    <head>
        <style>

            th {
                border: 1px solid red;
                text-align: center;
            }

            td {
                border: 1px dashed black;
                color: red;
            }

            table {

                font-family: Calibri;
            }
        </style>
    </head>
    <body>
        <table>
            <tr><th>My Table</th></tr>
            <tr><th>FName</th><th>LName</th><th>Age</th></tr>
            <tr><td>Derp</td><td>Derpania</td><td>69</td></tr>
            <tr><td>Buzz</td><td>Killington</td><td>42</td></tr>
        </table>
    </body> 
</html>

如果CSS和HTML都有解决方案，请给我两个。

Answer 1

您必须将colspan添加到th元素。

    <table>
        <tr><th colspan="3">My Table</th></tr>
        <tr><th>FName</th><th>LName</th><th>Age</th></tr>
        <tr><td>Derp</td><td>Derpania</td><td>69</td></tr>
        <tr><td>Buzz</td><td>Killington</td><td>42</td></tr>
    </table>

小提琴：http://jsfiddle.net/y0tyapz6/

如何居中和跨越表标题（行）

1 个答案: