css - テーブルをマーカーの行に折りたたむ

Question

ここでの主な問題は、テーブルを一連のインライン セルとしてレンダリングする方法です。以下は、質問の背景です。

レスポンシブ サイトでカレンダーをコーディングしています。カレンダーは で<table>、各セルは 1 日を表し、各日は を含み<table>、1 つは時間をリストし、もう 1 つはイベントの 2 つの列を持ちます。

しかし、このサイトはレスポンシブなので、カレンダーの css をモバイル デバイスで次のように表示させたいと考えています。

(ユーザーが日付の 1 つをタップすると、その日のイベントの小さなリストが表示されるという考え方です。これは、iPhone の Apple カレンダーの仕組みと非常によく似ています)。

この質問は、外側のテーブルではなく、内側のテーブルに関するものです。目標は、次のようなテーブルを転送することです。

10:30 | Event 1
12:45 | Event 2
18:30 | Event 3

次のようになります。

• • •

これを CSS で実行したいと考えています (これはメディア クエリにネストされます)。しかし、私が得ている結果は次のようになります。

これは、私が使用している関連する CSS です。

.calendar table, .calendar table>tbody>tr, .calendar table>tbody {
    display: inline;
}
.calendar table>tbody>tr td:first-child {
    display: none;
}
.calendar table>tbody>tr td:last-child {
    display: inline-block;
}
.calendar>tbody>tr>td {
    height: 20px;
    max-width: 35px;
    width: 14.2857142857143%;
    overflow: hidden;
    white-space: nowrap;
}
.calendar table a {
    display: none;
}
.calendar table tr>td:last-child:before {
    content: "•";
    visibility: visible;
    margin: 0;
}

問題を説明するフィドルを作成しました：http://jsfiddle.net/hvE8j/

Answer 1

フィドル: http://jsfiddle.net/hvE8j/5/

フローティングしてみてくださいtd:last-child：

.calendar table tr>td:last-child {
    float: left;
}

Answer 2

それらを水平方向に並べ替えるには、float right を使用する必要があります。

ここでフィドルを参照してください

.calendar table>tbody>tr, .calendar table>tbody
{
    display: inline;
    max-height: 10px;
    float: right;
}

Answer 3

の表示を.calendar table>tbody>tr, .calendar table>tbodyに変更inline-block

jsFiddle デモ