0

asp.netMVC3プロジェクトを表示しています。これまでのところ良いですが、すべてのコンテキストが一緒に詰め込まれています。このテーブルにしっかりとした境界が必要です。

簡単な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

固い境界線はどこ？各セル、行、テーブル全体、上記のすべて? 何を探しているのか正確にはわかりません。他の人は表の枠について答えました。

ゼブラ ストリッピングを探している場合は、これを行う方法がいくつかあります。

CSS3

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 に答える