HTML：并排放置表格并自动水平滚动
[英]HTML: placing tables side by side and have auto horizontal scroll
问题描述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Responsive email</title>
<style type="text/css">
body {margin: 10px 0; padding: 0 10px; background: #F9F2E7; font-size: 13px;}
table {border-collapse: collapse;}
td {font-family: arial, sans-serif; color: #333333;}
@media only screen and (max-width: 480px) {
body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
}
table {width: 100% !important;}
.responsive-image img {
height: auto !important;
max-width: 100% !important;
width: 100% !important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="640" bgcolor="#FFFFFF">
<tr>
<td bgcolor="#FFFFFF" style="font-size: 0; line-height: 0; padding: 0 0;" height="140" align="center" class="responsive-image">
<img src="SplashScreen_WithRMBLogo_Font48_36_AgencyFB.png" width="660" alt="" />
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="30"> </td></tr>
<tr>
<td style="padding: 10px 10px 20px 10px;">
<div style="font-size: 20px;">Hey guys,</div>
<br />
<div>
Here is the summary report
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="1" bgcolor="#F9F9F9"> </td></tr>
<tr><td style="font-size: 0; line-height: 0;" height="30"> </td></tr>
<tr>
<td>
<div style="max-height: 300px; max-width: 640px; width: 640px; overflow-x: auto; overflow-y: auto">
<table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td style="padding: 0 10px 0 10px;">
<div style="font-weight: bold; font-size: 16px;">Moto Hello</div>
<div>
Hello moto 1111111111111111111111111111111111111111111111111
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</table>
<table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td style="padding: 0 10px 0 10px;">
<div style="font-weight: bold; font-size: 16px;">Moto Ask</div>
<div>
How are you moto 22222222222222222222222222222222222222222222222222222222
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</table>
<table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td style="padding: 0 10px 0 10px;">
<div style="font-weight: bold; font-size: 16px;">Moto Answer</div>
<div>
Cool thanks moto 33333333333333333333333333333333333333333333333333333
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</table>
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td bgcolor="#A89C83">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td style="font-size: 0; line-height: 0;" height="15"> </td></tr>
<tr>
<td style="padding: 0 10px; color: #FFFFFF;">
v1 Report
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="15"> </td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Here is the code in jsfiddle: http://jsfiddle.net/nq3Re/124/ 
这是jsfiddle中的代码： http : //jsfiddle.net/nq3Re/124/
How do I get the three tables to be stacked horizontally? 如何使三张桌子水平堆叠？ Currently they stack vertically. 目前，它们垂直堆叠。
The number of tables need not be just three, it could be N. 表的数量不必只是三个，而可以是N。
3 个解决方案
解决方案1
1 2016-04-25 09:59:10
The solution to display HTML tables adjacent to each other without having them wrap but rather have a horizontal scroller come up. 该解决方案显示彼此相邻的HTML表而不进行包装，而是显示一个水平滚动条。
CSS: CSS：
div.container {
display: inline-block;
}
HTML: HTML：
<div style="white-space:nowrap">
<div class="container">
<table border="2">
<tr>
<td>test 1 111111111111111111111111111111111111111</td>
</tr>
</table>
</div>
<div class="container">
<table border="2">
<tr>
<td>test 2 22222222222222222222222222222222222222</td>
</tr>
</table>
</div>
<div class="container">
<table border="2">
<tr>
<td>test 3 33333333333333333333333333333333333333333333</td>
</tr>
</table>
</div>
</div>
The important thing is to float the inner divs by using display: inline-block . 重要的是通过使用display：inline-block浮动内部div。 The outer (or wrapper) div must have a white-space:nowrap 外部（或包装器）div必须具有空格：nowrap
This is what the result looks like: https://jsfiddle.net/9k8ns73f/ 结果是这样的： https : //jsfiddle.net/9k8ns73f/
解决方案2
0 2016-04-22 16:16:15
This can easily be done with floated divs: 这可以通过浮动div轻松完成：
CSS: CSS：
div.container {
float: left;
box-sizing: border-box;
text-align: center;
}
HTML 的HTML
<div class="container">
<!-- Table or even just content here -->
</div>
<div class="container">
<!-- Table or even just content here -->
</div>
<div class="container">
<!-- Table or even just content here -->
</div>
You can add whatever necessary css to .container ... you can also add additional css classes to each individual div if needed. 您可以将任何必要的CSS添加到.container ...，也可以根据需要向每个div添加其他CSS类。
解决方案3
0 2016-04-22 16:23:56
将它们显示为行内块：
<div class="container" style="display: inline-block"></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.