为什么我的表格没有显示边框？

Question

我修改了我的 Site.css 文件，它被 _SiteLayout.cshtml 引用，试图给表格内容一个边框：

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;

    /* added below 4/23/2013 and commented out: border: 0 none; */
    border-color: #600;
    border-width: 0 0 1px 1px;
    border-style: solid;
}

. . .

td {
    padding: 0.25em 2em 0.25em 0em;

    /* added below 4/23/2013 and commented out: border: 0 none;*/
    border-color: #600;
    border-width: 1px 1px 0 0;
    border-style: solid;
    margin: 0;
    padding: 4px;
    background-color: #FFC;
}

我的表格没有边框，但是...为什么不呢？

更新

好的，现在，在尝试为表格添加边框之后，突然间 jQuery 不再工作了。所以这是独家新闻：

_SiteLayout.cshtml 引用 .css 文件：

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

在我现在拥有的那个文件中：

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;

    /* added below 4/23/2013 and commented out: border: 0 none; 
    border-color: #600;
    border-width: 0 0 2px 2px;
    border-style: solid;*/
    border: 1px solid #600;
}

td {
    padding: 0.25em 2em 0.25em 0em;

    border:1px solid #600;
    margin: 0;
    padding: 4px;
    background-color: #FFC;
}

（省略号表示 table 和 td 之间还有其他标签，省略以避免混淆）

我的整个 Default.cshtml 是：

@{
    Layout = "~/_PlatypusLayout.cshtml";
    Page.Title = "Home Page";
}
        <input type="submit" id="submit" value="Get SSCSSETUP.XML" />
        <div id="Platypus_Setup">
        </div>
        <input type="submit" id="submit2" value="Get PlatypusSETUP_000002.XML" />
        <div id="Platypus_Setup2">
        </div>
        <input type="submit" id="submit3" value="Get PlatypusSETUP_000003.XML" />
        <div id="Platypus_Setup3">
        </div>
<script>
    $(document).ready(function () {
        $('#submit').click(function () {
            $.ajax({
                type: "GET",
                url: "DuckbillSETUP.XML",
                dataType: "xml",
                success: function (PlatypusSetupRec) {
                    var Platypussetup = "<table><thead><th>Platypus Number</th><th>Platypus Name</th></thead>";
                    $(PlatypusSetupRec).find('Platypus').each(function () {
                        var PlatypusNum = $(this).find('PlatypusNumber').text();
                        var PlatypusName = $(this).find('PlatypusName').text();
                        Platypussetup += "<tr>";
                        Platypussetup += "<td>" + PlatypusNum + "</td>";
                        Platypussetup += "<td>" + PlatypusName + "</td>";
                        Platypussetup += "</tr>";
                    });
                    Platypussetup += "</table>";
                    $('#Platypus_Setup').append(Platypussetup);
                },
                error: function (xhr) {
                    alert(xhr.status);
                }
            });
            return false;
        });
    });
</script>

表格在单击第一个按钮时显示，但是更改 Site.css 或因为我在 Chrome 中按 Ctrl+R 现在导致单击处理程序失聪或脱钩或否则以某种方式出现故障...

Answer 1

如果 table 和 td 样式定义之间的 3 个点也出现在您的代码中，则可能是原因。

Answer 2

"ReferenceError: $未定义[Break On This Error]...

这表明您的脚本不知道$ 是什么。有两个可能的问题：

1. 您没有导入 jQuery（不太可能）
2. 您在实际脚本之后导入了 jQuery.js。

检查文件的导入顺序：首先是 jQuery，然后是脚本。

Answer 3

试着改成这样写：

边框：1px 实心 #600;

Answer 4

试试border:1px solid #600;，而不是你目前拥有的。

Answer 5

这是JSFiddle

HTML：

<table>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td><td>Test 2</td></tr>
</table>

CSS：

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 1px solid #600;
}

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 1px solid #600;
    margin: 0;
    padding: 4px;
    background-color: #FFC;
}