Question

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

Answer 1

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

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

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

Answer 2

坚固的边界在哪里？在每个细胞周围，排，整个桌子，以上所有？不确定你到底在找什么。其他人回答了桌边界。

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

CSS 3

IE＆lt; = 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>

Answer 3

Inline会变得很糟糕，在外部样式表中更好，或至少在头部：

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

如果必须内联，那么

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

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

所有相当漂亮的网格线

3 个答案: