HTML 表格：删除空单元格周围的边框答案

【问题标题】：HTML Table: Removing borders around empty cellsHTML 表格：删除空单元格周围的边框
【发布时间】：2015-12-31 20:56:02
【问题描述】：

出于某种原因，我正在为此苦苦挣扎，在 HTML 中，我正在通过制作日历来练习表格。我有一个带有标题和一些数据的表格，一切正常，但我最终得到了空单元格周围的边框。我只希望带有数据的单元格和表格本身有边框。

我是不是搞错了？

另外，有没有办法使用行值和列值将数据写入表格中的特定单元格？

这是我的代码的编辑部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Victor's Fall 2015 Timetable</title>
</head>

<body>
    <table border="1">
        <tr>
            <th></th>
            <th> Monday </th>
            <th> Tuesday </th>
            <th> Wedenesday </th>
            <th> Thursday </th>
            <th> Friday </th>
        </tr>

        <tr>
            <th> 11:00 </th>
                <td></td>
                <td></td>
                <td rowspan="2">Database Lecture</td>
                <td></td>
                <td></td>
        </tr>

        <tr>
            <th> 11:30 </th>
        </tr>

        <tr>
            <th> 12:00 </th>
                <td></td>
                <td rowspan="2">Communications Lecture</td>
                <td rowspan="3">Database Lab</td>
                <td></td>
                <td rowspan="2">Java Lecture</td>
        </tr>

        <tr>
            <th> 12:30 </th>
        </tr>       

        <tr>
            <th> 1:00 </th>
        </tr>

    </table>
</body>
</html>

【问题讨论】：

这个页面是静态的吗？或动态生成

标签： html html-table

【解决方案1】：

你必须使用table css border-collapse: separate;empty-cells: hide;

有例子：

table
{
    border-collapse: separate;
    empty-cells: hide;
}

 <table border="1">
        <tr>
            <th></th>
            <th> Monday </th>
            <th> Tuesday </th>
            <th> Wedenesday </th>
            <th> Thursday </th>
            <th> Friday </th>
        </tr>

        <tr>
            <th> 11:00 </th>
                <td></td>
                <td></td>
                <td rowspan="2">Database Lecture</td>
                <td></td>
                <td></td>
        </tr>

        <tr>
            <th> 11:30 </th>
        </tr>

        <tr>
            <th> 12:00 </th>
                <td></td>
                <td rowspan="2">Communications Lecture</td>
                <td rowspan="3">Database Lab</td>
                <td></td>
                <td rowspan="2">Java Lecture</td>
        </tr>

        <tr>
            <th> 12:30 </th>
        </tr>       

        <tr>
            <th> 1:00 </th>
        </tr>

    </table>

更新基于 OP 评论：

它在css 文件中，但是，如果您不使用css 文件（？）那么您可以在border="1" 之后输入table ...只需添加style="border-collapse: separate; empty-cell:hide;"

<table border="1" style="border-collapse: separate; empty-cells: hide;"> ...等等你的html的其余部分。

【讨论】：

我以前见过这个解决方案，但我不确定将那段代码放在哪里。我只有一个 .html 文件，其中包含我在 Notepad++ 上编辑的代码。

【解决方案2】：

如果您的页面是静态的，那么您可以将.noborder 类添加到空的td 标记

.noborder {
border-style: none;
}

<td class='noborder'></td> 不会有边框

【讨论】：

【解决方案3】：

我不确定这是否适合您尝试做的事情，但一种选择是给每个人一个带有“坐标”的 id

例如：

<table>
    <tr>
        <td id="r0c0"> Row 0, Col 0</td>
        <td id="r0c1"> Row 0, Col 1</td>
        <td id="r0c2"> Row 0, Col 2</td>
    </tr>
    <tr>
        <td id="r1c0"> Row 1, Col 0</td>
        <td id="r1c1"> Row 1, Col 1</td>
        <td id="r1c2"> Row 1, Col 2</td>
    </tr>
    <tr>
        <td id="r2c0"> Row 2, Col 0</td>
        <td id="r2c1"> Row 2, Col 1</td>
        <td id="r2c2"> Row 2, Col 2</td>
    </tr>

有了更多信息，如果这不起作用，我也许可以为您提供不同/更好的解决方案。

更新：我重新阅读了这个问题，并意识到这只能回答你的部分问题。无论如何希望它有所帮助！

【讨论】：