Question

我的HTML是：

<table style="width:100%;">
<tbody>
    <tr>
        <th style="width:40%; ">
            No Border here, just white background
        </th>
        <th style="width:60%; background-color:gray" colspan="3">
            Superheading</th>
    </tr>
    <tr>
        <th align="left" style="width:40%">Options</th>
        <th style="width:20%">Title2</th>
        <th style="width:20%">Title3</th>
        <th style="width:20%">Title4</th>
    </tr>
    <tr>
        <td>Option1</td>
        <td>val1</td>
        <td>val2</td>
        <td>val3</td>
    </tr>
</tbody>
</table>

如何删除左上方单元格中的边框，即包含＆＃34;此处没有边框的单元格，只是白色背景＆＃34;。

感谢。

Answer 1

你可以这样做 - DEMO

<强> HTML：

<body>
    <style>
        table, table th, table td {
            border:1px solid black;
            border-collapse:collapse;
        }
    </style>
    <table style="width:100%;">
        <tbody>
            <tr>
                <th style="width:40%; background-color:white;" class="border-less">&nbsp;</th>
                <th style="width:60%;text-align:center" colspan="3">Assumed Growth Rate</th>
            </tr>
            <tr>
                <th align="left" style="width:40%">Options</th>
                <th style="width:20%">Title2</th>
                <th style="width:20%">Title3</th>
                <th style="width:20%">Title4</th>
            </tr>
            <tr>
                <td>Option1</td>
                <td>val1</td>
                <td>val2</td>
                <td>val3</td>
            </tr>
        </tbody>
    </table>
</body>

<强> CSS：

.border-less {
    border-top: 1px solid white;
    border-left: 1px solid white;
}

Answer 2

尝试添加：

style="border: none";

在th标签或包含标题的tr标签上。取决于你需要的东西..

Answer 3

This fiddle使用CSS和＆＃39; .borderless＆＃39;类。

但是，如果你想坚持使用内联样式，你可以这样做：

<th style="width:40%; border:none;">

如何摆脱此表左上角的边框？

3 个答案: