html - 如何居中和跨越表格标题(行)

标签 html css

我需要知道如何居中和跨越“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 都有解决方案,请同时提供给我。

最佳答案

您必须将 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>

fiddle :http://jsfiddle.net/y0tyapz6/

关于html - 如何居中和跨越表格标题(行),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26350406/

相关文章:

javascript - toSVG() 不尊重文本和下划线的来源

html - CSS Columns - 将标题定位到文本流的第二列

javascript - 使用触摸调整 HTML 元素的大小

javascript - 事件监听器只工作一次

css - 现代浏览器中以 px 为单位的字体大小(好不好,120 dpi 怎么样?)

html - CSS hover - 如何让它改变两个嵌套的 div

html - R 中的 cox 回归输出表或图

javascript - JQuery 计算器 : can not get operators to work

javascript - 如何删除滚动sidenav

html - 使用 css 更改不透明度并在悬停时添加缩略图