Question

这是html代码 -

<table style='min-width:60%;height:25px;'>
    <tr>
        <td><data:post.title></td>
        <td id='date-and-author' style='position: relative;bottom: -2px;white-space:nowrap;'><data:post.author><data:post.dateHeader></td>
    </tr>
</table>

这给出了以下结果 -

如何制作html表由admin于8/1/13

您可以看到标题，管理员和日期都在一行中。问题是，当设备的最大宽度为480px时，管理员在8/1/13'的'用完了100％的窗口大小。如果我在ID #date-and-author 中使空格=正常，则显示如下：
by admin
2013年1月1日
哪个不好。我想，当设备的最大宽度为480px时，管理员在8/1/13'的'将显示在新行中。我应该在@media only screen and (max-width:480px){..}中放置什么css，以便id #date-and-author 在新行中显示为：

如何制作html表
由管理员于8/1/13发我不想使用div元素。请帮帮我。

Answer 1

您可以告诉td显示为表格行（但您需要将其应用于td，因此我也提供了第一个td和ID，或者您可以分配该表中的所有td：

<table style='min-width:60%;height:25px;'>
<tr>
    <td id='title'><data:post.title></td>
    <td id='date-and-author' style='position: relative;bottom: -2px;white-space:nowrap;'><data:post.author><data:post.dateHeader></td>
</tr>
</table>

@media only screen and (max-width:480px){
    td#title, td#date-and-author { display:table-row; }
}

如何使用CSS在这个帖子标题表中进行更改？

1 个答案: