2

这里的主要问题是如何使表格呈现为一组内联单元格？以下是该问题的一些背景：

我正在我的响应式网站上编写日历。日历是 a <table>，其中每个单元格代表一天，并且每一天包含 a <table>，它有两列，一列列出时间，另一列列出事件：

基准日历

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

CSS 小

（想法是当用户点击其中一个日期时，他们将看到当天的一小部分事件列表；这与 iPhone 上的 Apple 日历的工作方式非常相似）。

这个问题是关于内表的，而不是外表。目标是传输如下所示的表：

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

变成这样的东西：

• • •

现在我想在 CSS 中执行此操作（将嵌套在媒体查询中）。但是我得到的结果是这样的：

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/

4

3 回答 3

1

小提琴：http: //jsfiddle.net/hvE8j/5/

尝试浮动td:last-child：

.calendar table tr>td:last-child {
    float: left;
}
于 2013-08-10T14:14:54.150 回答
1

您应该使用 float right 对它们进行水平排序。

在这里看小提琴

.calendar table>tbody>tr, .calendar table>tbody
{
    display: inline;
    max-height: 10px;
    float: right;
}
于 2013-08-10T14:15:35.500 回答
1

将显示更改.calendar table>tbody>tr, .calendar table>tbody为inline-block

jsFiddle 演示

于 2013-08-10T14:21:10.827 回答