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

（省略号表示表和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

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

Answer 2

尝试这样写：

border：1px solid＃600;

Answer 3

尝试使用border:1px solid #600;代替您目前拥有的内容。

Answer 4

这是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;
}

Answer 5

“ReferenceError：$未定义[打破此错误] ...

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

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

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

为什么我的桌子没有带边框？

更新

5 个答案: