0

这是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>

这给出了以下结果 -

如何      在 13 年 8 月 1 日由管理员制作 html 表格

您可以看到标题、管理员和日期都在一行中。问题是，当设备的最大宽度为 480 像素时， “13 年 8 月 1 日由管理员管理”会耗尽 100% 的窗口大小。如果我在 id #date-and-author中设置空白 = 正常， 那么它会显示为：
管理员
在 2013 年 8 月 1 日，
这不好。我想，当设备的最大宽度为 480 像素时，“由 8/1/13 上的管理员”将显示在新行中。我应该放置什么 css，@media only screen and (max-width:480px){..}以便 id #date-and-author将在新行中显示为：

How to make html table
by admin on 8/1/13

我不想使用 div 元素。请帮我。

4

1 回答 1

0

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

<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; }
}
于 2013-08-12T18:05:45.070 回答