0

表形式のデータを表示するために、AngularJS アプリで「ngTable」コンポーネント (ここにリンクの説明を入力) を使用しています。ngGrid よりも少し使いやすく、ngGrid がテーブルを構成する方法が好きではありません (特に、テーブルのヘッダー文字列を HTML ではなく JavaScript に入れるのは好きではありません)。

ngTable は十分に機能しますが、その構成可能性にはいくつかの制限があるようです。たとえば、ヘッダーとセルに列区切りを追加したいだけです。HTML で ngTable を参照する方法では、テーブル ヘッダー要素を指定せず、セルだけを指定します。「td」要素にクラスを配置して、セルにセパレーターを追加できると思いますが、ヘッダーには影響しません。

誰でもこれを行う方法についていくつかのアイデアを持っていますか?

4

1 に答える 1

0

CSSでそれを行うことができます

table.ng-table thead th:not(:first-child) {
  border-left: 1px solid red;
}

table.ng-table thead th:not(:last-child) {
  border-right: 1px solid red;
}

table.ng-table tbody td:not(:first-child) {
  border-left: 1px solid blue;
}

table.ng-table tbody td:not(:last-child) {
  border-right: 1px solid blue;
}

例: http://plnkr.co/edit/t77lzM1o6Xh2PBnhZqw6?p=preview

このアプローチの唯一の欠点は、IE 9 未満では機能しないことです。IE <9 で動作させるには、定義時に各列にクラスを追加<td>し、css でそれらを一致させる必要があります。

特定の列の境界線のみが必要な場合は、境界線が必要な列にクラスを追加するだけでcssが実際に簡単になり、cssでそのためにborder-leftまたはborder-rightを追加するだけですtd.col-style-name

于 2014-03-13T00:27:28.587 に答える