0

我在 asp.net MVC 3 项目中有一个视图。到目前为止一切都很好，但是所有的上下文都打包在一起了。我只希望这张桌子有坚实的边界。

有简单的 CSS（内联）吗？

 <table>
    <thead>
        <tr>
            <td>ID</td>
            <td>PIN</td>
            <td>First Name</td>
            <td>Middle Name</td>
            <td>Last Name</td>
        </tr>
    </thead>
    @foreach (var r in ViewBag.collections)
    { 
        <tr>
            <td>@r.IDNumber</td>
            <td>@r.PIN</td>
            <td>@r.FirstName</td>
            <td>@r.MiddleName</td>
            <td>@r.LastName</td>
        </tr>
    }
</table>
4

3 回答 3

3

您可以在 CSS 规则中对表格应用一些边框样式：

table tr {
    border: 1px solid black;
}
table td, table th {
    border-right: 1px solid black;
}

大多数浏览器仍然支持<table border="1">，但不建议再做

于 2012-11-16T21:41:55.537 回答
1

坚实的边界在哪里？围绕每个单元格，行，整个表格，以上所有？不确定您在寻找什么。其他人回答了关于表格边框的问题。

如果您正在寻找斑马剥离，有几种方法可以做到这一点：

CSS 3

在 IE <= 8 中不支持

<style>
    tbody > tr:nth-child(odd) { background-color: #eee; }
    tbody > tr:nth-child(even) { background-color: #eee; }
<style>

在代码中

Just add two css classes: `tr.odd` and `tr.even`

<style>
    .odd { background-color: #eee; }
    .even { background-color: #eee; }
<style>

那么在你看来：

var i = 0;
@foreach (var r in ViewBag.collections)
{ 
    var rowClass = i++ % 2 == 0 ? "even" : "odd"
    <tr class="@rowClass">
        ...
    </tr>
}

使用 jQuery

添加上述奇数/偶数 css 类。

<script>
    $(function() {
        $('tbody > tr:odd').addClass('odd');
        $('tbody > tr:even').addClass('even');
    });
</script>
于 2012-11-16T21:56:56.080 回答
0

内联会很糟糕，在外部样式表中更好，或者至少在头部有：

​td{padding:5px 8px;border:1px solid #CCC;}​

如果它必须是内联的，那么

<td style="padding:5px 8px;border:1px solid #CCC;">

演示：http: //jsfiddle.net/calder12/YTVzM/

于 2012-11-16T21:42:13.297 回答