使用 XHTML 1.0 Transitional 的表格样式

发布于 2024-09-09 01:09:57 字数 1197 浏览 8 评论 0原文

我正在尝试向 XHTML 1.0 Transitional 网页的表格行添加边框和填充（请参阅下面的代码进行重现）。我知道，如果我将页面类型更改为其他类型，我将能够向表行和单元格添加边框和填充。但在 XHTML 1.0 Transitional 中，它根本不起作用。

考虑到我无法更改 DOCTYPE，我应该如何向表格添加边框和填充？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
            table
            {
                border: solid 1px black;
            }

            tr
            {
                /* Doesn't work */
                margin: 10px;
                border: solid 1px black;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>                
            </tbody>
        </table>
    </body>
</html>

原文

I am trying to add a border and padding to the table row of XHTML 1.0 Transitional web page (see code below to repro). I know that if I change the type of page to something else, I will be able to add borders and padding to the table rows and cells. But in XHTML 1.0 Transitional, it doesn't work at all.

Considering that I can't change the DOCTYPE, what am I suppose to do add a border and padding to the table?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
            table
            {
                border: solid 1px black;
            }

            tr
            {
                /* Doesn't work */
                margin: 10px;
                border: solid 1px black;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>                
            </tbody>
        </table>
    </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只涨不跌 2024-09-16 01:09:57

尝试查看边框和边距在 td 上是否有效。

td
{ 
    margin: 10px; 
    border: solid 1px black; 
}

如果是这样，您必须仅将其设置为中心单元格的顶部/底部边距。

Try seeing if the border and margin works on the td.

td
{ 
    margin: 10px; 
    border: solid 1px black; 
}

If it does you'll have to make it top/bottom margin only for center cells.

回复收藏 0 原文

老子叫无熙 2024-09-16 01:09:57

如果您希望它们围绕每个单元格，请将样式应用于 td 元素，而不是 tr：假设您希望将其应用于 tr，我不完全确定为什么会这样，但是向表格添加 border-collapse 将使 tr边框工作：

            table
            {
                border: 1px solid black;
                border-collapse:collapse;
            }

            tr
            {
                /*use if you want the lines to be per row instead of per cell*/
                border: 1px solid black;
            }

对于边距，我会向 td 元素应用填充：

            td
            {
                padding: 10px;

                /*use if you want lines between each cell*/
                border: 1px solid black;
            }

If you want them around each cell, apply the style to the td element, not the tr: Assuming you want it on the tr, I'm not entirely sure why this works, but adding border-collapse to the table will make the tr border work:

            table
            {
                border: 1px solid black;
                border-collapse:collapse;
            }

            tr
            {
                /*use if you want the lines to be per row instead of per cell*/
                border: 1px solid black;
            }

For the margins, I'd go with applying padding to the td elements:

            td
            {
                padding: 10px;

                /*use if you want lines between each cell*/
                border: 1px solid black;
            }

回复收藏 0 原文

~没有更多了~