4

iOS のようなカレンダー リスト ビューを実装しようとしています。基本的に、私が今やっていることは、イベントの配列をループすることです。新しい日付の場合は日付ヘッダーを印刷し、そうでない場合はカレンダー イベントを印刷します。DATE HEADER 行が「スクロールされる」までスティッキーにしたい。

どうすればそれを達成できますか？スティッキー ヘッダーの例はたくさんありますが、この「スティッキー」機能をテーブルの行だけに適用する実際の例はありません。私<tableも独自のスクロール可能な固定高さ内に配置されており、ヘッダーをの<div>代わりに上部に貼り付けたいtop:0;

コードをhttp://codepen.io/anon/pen/zxpkrのペンに入れましたが、セル全体にまたがっていcolspanないため、を修正し、を の上部に貼り付ける必要があります。<td><tr><div>

4

3 に答える 3

1

行の絶対位置を作成する代わりに、ブラウザー間でうまく機能しない可能性がありますが、テーブル ヘッドとして機能する (そして親 div の上部にくっつく) テーブルを上部に配置し、データ テーブルをスクロールさせます。その下。

これには jQuery を使用する必要さえありません。

http://jsbin.com/ucevuy/1/edit

* {
  margin:0;
  padding:0;
}
div {
  border:solid red;
  height:300px;
  overflow:auto;
}
table {
  width:400px;
}
td {
  border:solid black 1px;
  width:50%;
}
.head {
  position:absolute;
  top:0;
  background-color:#fff;
}

.data {
  margin-top:20px;
}
于 2013-07-14T08:19:11.927 に答える