Question

由于某种原因，我在这方面苦苦挣扎，在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>

Answer 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文件（？），那么您可以在table之后加入border="1" ...只需添加{{ 1}}

style="border-collapse: separate; empty-cell:hide;" ...等等你的html。

Answer 2

如果您的网页是静态的，那么您可以添加.noborder课程以清空td代码

.noborder {
border-style: none;
}

<td class='noborder'></td>没有边框

Answer 3

我不确定这是否符合你要做的事情，但一个选择就是给每个人一个id＆＃34;坐标＆＃34;

例如：

<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>

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

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

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

3 个答案: