Html 响应表单元格到新行
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16628471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive Table cell to new line
提问by user2019515
There's a third party content site that I have to "EMBED" via dynamic content, I don't know Ajax or Jquery at the moment so I am wondering if its possible to shift a table cell down to a new line essentially creating a new row.
有一个第三方内容网站,我必须通过动态内容“嵌入”,我目前不知道 Ajax 或 Jquery,所以我想知道是否有可能将表格单元格向下移动到新行,从而创建一个新行.
The embed ends up with:
嵌入最终为:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
There were no classes or ID's placed in the table, however it is the only table on the page and it has way too much content to fit on one line, this is for a mobile website so I've got to make the whole page 320 pixels wide.
表格中没有放置课程或 ID,但它是页面上唯一的表格,而且内容太多,无法放在一行中,这是针对移动网站的,所以我必须将整个页面设为 320像素宽。
Is it possible using CSS alone?
是否可以单独使用 CSS?
I can't insert new HTML, the content is dynamically created from a secure server that we don't have access to, but we use an API key in order to access.. mediaqueries work though.
我无法插入新的 HTML,内容是从我们无权访问的安全服务器动态创建的,但我们使用 API 密钥来访问..媒体查询虽然有效。
I'm currently trying to experiment with something along the lines of:
我目前正在尝试尝试以下方面的内容:
td {clear:both;}
回答by user2019515
You can set the td
to display:block;
then they'll all be under eachother.
你可以设置td
为display:block;
然后他们都在彼此之下。
HTML
HTML
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
CSS
CSS
td{
display:block;
}
See here: http://jsfiddle.net/hDsts/
回答by Legionar
Other solution (when display: block;
not works) is to use inline-block
:
其他解决方案(当display: block;
不起作用时)是使用inline-block
:
CSS
CSS
td {
display: inline-block;
}