HTML：表格后的段落，出现在表格的右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19304626/
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
HTML: Paragraphs after table, appearing to right of table
提问by Dennis
We are designing an application that will send e-mail to managers reminding them that they have to do certain approvals. The e-mail is in HTML form, and contains a table. We don't understand what we're doing wrong to cause the last paragraph to appear to the right of the table instead of under it.
我们正在设计一个应用程序，该应用程序将向经理发送电子邮件，提醒他们必须进行某些审批。电子邮件采用 HTML 格式，并包含一个表格。我们不明白我们做错了什么导致最后一段出现在表格的右侧而不是它的下方。
A sample is below. The tool "tidy," on which I rely for things like this, has no tips this time.
下面是一个示例。我依赖的工具“tidy”这次没有提示。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content=
"HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org"
name="generator">
<meta content='text/html; charset=us-ascii' http-equiv=
"Content-Type">
<style type="text/css">
body {font-family: Calibri; }
caption {font-family: Calibri;color: 'black'; font-size: '125%; }
table.main tr { };
table.main td.bottomcaption {text-align: 'center'; vertical-align: 'middle'; font-family: 'Calibri'; color: 'black'; font-color: 'black'; font-size: '125%'; }
table.main th {vertical-align: 'bottom'; color: blue; background-color: lightyellow; }
</style>
<title>Payable Time awaiting approval</title>
</head>
<body>
<p>Hello, <strong>Daffy Duck</strong>:</p>
<p>According to our records, the following Payable Time is awaiting
approval. Items shown below must be approved in order for
compensation to take place.<br></p>
<p>For questions, please contact <a href=
"MAILTO:SUPPORT@OUR_ORG.COM">Support</a></p>
<table align="left" border="1" class='main' summary="Pending details">
<caption ><strong>Awaiting approval by your reporting
structure</strong></caption>
<tr>
<th align="left"> <br>
Name</th>
<th align="center"> <br>
ID</th>
<th align="center">Work<br>
Date</th>
<th align="center"> <br>
Type</th>
<th align="center"> <br>
Hours</th>
</tr>
<tr>
<td colspan="5">Reporting to Mickey M Mouse (MMM)</td>
</tr>
<tr>
<td align="left">Daisy</td>
<td align="left">D_DUCK</td>
<td align="center">04/29/2013</td>
<td align="left">REG</td>
<td align="right">8.00</td>
</tr>
<tr>
<td align="left">Daisy</td>
<td align="left">D_DUCK</td>
<td align="center">05/01/2013</td>
<td align="left">REG</td>
<td align="right">8.00</td>
</tr>
<tr>
<td align="left">Daisy</td>
<td align="left">D_DUCK</td>
<td align="center">05/02/2013</td>
<td align="left">OT</td>
<td align="right">7.50</td>
</tr>
</table>
<p> <br></p>
<p> </p>
<p>This message comes from The Support Team</p>
</body>
</html>
We would very much like for the text "This message comes from..." to appear below the table, but instead it appears to the right of the table, aligned with the table's top. This is true for IE7, IE8 and Firefox 12.
我们非常希望文本“此消息来自...”出现在表格下方，但它出现在表格右侧，与表格顶部对齐。这适用于 IE7、IE8 和 Firefox 12。
I'd appreciate any suggestions to help this situation.
我很感激任何有助于解决这种情况的建议。
Regards, Dennis
问候， 丹尼斯
回答by Francis
Just remove the align="left"to your table.
只需将其align="left"移到您的桌子上即可。
see the link: http://jsfiddle.net/rhyDe/
见链接：http: //jsfiddle.net/rhyDe/
Tested on IE10, FF24, Chrome 30
在 IE10、FF24、Chrome 30 上测试
回答by Dementic
you could use similar markup to this: http://jsfiddle.net/7fAy9/2/
你可以使用类似的标记：http: //jsfiddle.net/7fAy9/2/
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>0</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">This is the text you want under the table</td>
</tr>
</tfoot>
</table>
or, you could do something like this: http://jsfiddle.net/NNrnc/
或者，你可以做这样的事情：http: //jsfiddle.net/NNrnc/
<table border="1">
<caption align="bottom">My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
but please notice the captionalign is deprecated in HTML5,
the correct way to do it in HTML5 would be:
但请注意captionalign 在 HTML5 中已被弃用，在 HTML5 中正确的做法是：
<table border="1">
<caption style="caption-side:bottom">My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
回答by Josan Iracheta
Easy fix. Add this to the last sentence:
轻松修复。在最后一句中添加：
<p style="float:left;">This message comes from the support team.</p>
