如何在表格中为每个单元格加上边框？

问题描述 投票：0回答：1

我有一张简单的桌子。我想在[[every单元格周围使用1px solid black边框。由于某种原因，我只能得到概述整个表格的边框。我尝试将border-collapse: separate;添加到表格样式中，我认为这是默认样式，但这也不起作用。

我做错什么了吗？如何为每个单元格设置边界？

我现在所拥有的是：

<table style="font-family:Arial; font-size:12px; border:1px solid black;"> <tr style="outline: thin solid"> <th align="left">Initiative</th> <th align="left">Scheduled Finish</th> </tr> <tr style="outline: thin solid"> <td align="left">[Initiative Name]</td> <td align="left">[Initiative Scheduled Finish Date]</td> </tr> </table>
html html-table
1个回答
1
投票
您需要将边框应用于单元格（TD）而不是表格

TD,TH { border:1px solid black; }
<!doctype html>
<html>
    <body style="font-family:Arial;">
        <table style="font-family:Arial; font-size:12px;">
            <tr>
                <th align="left">Initiative</th>
                <th align="left">Scheduled Finish</th>
            </tr>
            <tr>
                <td align="left">[Initiative Name]</td>
                <td align="left">[Initiative Scheduled Finish Date]</td>
            </tr>
        </table>
    </body>
</html>
0
投票
在您的CSS中尝试：

th, td { border: 1px solid black; }

0
投票
最安全的方法是给您的桌子上课。这样，它不会影响页面中的任何其他表。

.my-table-border th, .my-table-border td { border: 1px solid black }
<!doctype html>
<html>
    <body style="font-family:Arial;">
        <table class="my-table-border" style="font-family:Arial; font-size:12px; border:1px solid black;">
            <tr style="outline: thin solid">
                <th align="left">Initiative</th>
                <th align="left">Scheduled Finish</th>
            </tr>
            <tr style="outline: thin solid">
                <td align="left">[Initiative Name]</td>
                <td align="left">[Initiative Scheduled Finish Date]</td>
            </tr>
        </table>
    </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.