将表折叠成一排标记

Question

这里的主要问题是如何将表格渲染为一组内联单元格？以下是该问题的一些背景知识：

我正在我的自适应网站上编写日历。日历为<table>，其中每个单元格代表一天，每天包含<table>，其中包含两列，一列列出时间和其他事件：

但是由于该网站是响应式的，我想让移动设备上的日历css看起来像这样：

（这个想法是，当用户点击其中一个日期时，他们会看到当天的一小部分事件;这与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

你应该使用右边的水平来对它们进行水平排序。

See fiddle here

.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 Demo