3

特定の承認を行う必要があることをマネージャーに通知する電子メールをマネージャーに送信するアプリケーションを設計しています。電子メールは HTML 形式で、表が含まれています。最後の段落がテーブルの下ではなく右に表示されるようにするために、何が間違っているのか理解できません。

以下にサンプルを示します。そんな私が頼りにしているツール「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">&nbsp;<br>
Name</th>
<th align="center">&nbsp;<br>
ID</th>
<th align="center">Work<br>
Date</th>
<th align="center">&nbsp;<br>
Type</th>
<th align="center">&nbsp;<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>&nbsp;<br></p>
<p>&nbsp;</p>
<p>This message comes from The Support Team</p>
</body>
</html>

「このメッセージの送信元は...」というテキストをテーブルの下に表示したいのですが、代わりに、テーブルの上部に合わせてテーブルの右側に表示されます。これは、IE7、IE8、および Firefox 12 に当てはまります。

この状況を助けるための提案をいただければ幸いです。

よろしく、デニス

4

3 に答える 3

7

align="left"をテーブルに移動するだけです。

リンクを参照してください: http://jsfiddle.net/rhyDe/

IE10、FF24、Chrome 30 でテスト済み

于 2013-10-10T19:36:52.453 に答える
3

これと同様のマークアップを使用できます: http://jsfiddle.net/7fAy9/2/

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>

  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">This is the text you want under the table</td>
    </tr>
  </tfoot>
</table>

または、次のようなこともできます: 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>$100</td>
  </tr>
</table>

captionただし、HTML5 では align が非推奨になっていることに注意してください。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>$100</td>
  </tr>
</table>
于 2013-10-10T19:35:33.823 に答える
-1

簡単に修正。これを最後の文に追加します。

<p style="float:left;">This message comes from the support team.</p>
于 2013-10-10T19:35:13.387 に答える