web-dev-qa-db-ja.com

テーブルを最大幅の100％にするCSS

電子メールテンプレートについて次のことを考えます。

<style>
  @import url("http://fonts.googleapis.com/css?family=Open Sans");
</style>

<div style="width:100%; background:#F2F2F2">
  <table style="padding: 25px; margin: 0 auto; font-family:'Open Sans', 'Helvetica', 'Arial';">
    <tr align="center" style="margin: 0; padding: 0;">
      <td>
        <table style="border-style:solid; border-width:2px; border-color: #c3d2d9;" cellspacing="0">
          <tr style="background-color: white;">
            <td style="width: 700px; padding: 10px 15px 10px 15px; color: #000000;">
              <p>Some content here</p>
              <span style="font-weight: bold;">My Signature</span><br/>
              My Title<br/>
              My Company<br/>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

テーブルの幅は正確に700pxになります。ただし、幅が完全に固定されているため、幅が700ピクセル未満のデバイスではサイズを変更できません。しかし、td要素をこれに変更すると：

<td style="max-width: 700px; width: 90%; padding: 10px 15px 10px 15px; color: #000000;">
   <p>Some content here</p>
   <span style="font-weight: bold;">My Signature</span><br/>
   My Title<br/>
   My Company<br/>
</td>

その場合、テーブルの幅は最大で約100ピクセルです。

テーブルが700pxになるようにCSSを並べ替える方法はありますが、ビューポートが小さくなるとサイズが変更されますか？

csshtml-tablewidthhtml-email
12
Noah Goodrich

このような

デモ

css

table{
    width:100%;
}
18
Falguni Panchal

以下を使用する必要があります。

    table{
        width:100%;
        table-layout: fixed;
        overflow-wrap: break-Word;
    }

デモ

4
Pablo

私は同じ問題を抱えていました。これは、テーブルにbootstrapクラス "hidden-lg"があり、それがばかげて表示になったためです。block！important;

Bootstrap代わりにこれを行うとは決して考えられない：

@media (min-width: 1200px) {
    .hidden-lg {
         display: none;
    }
}

そして、他の画面サイズに対して以前に表示されていたものは何でも要素をそのままにします。

とにかくそう：

table {
    display: table; /* check so these really applies */
    width: 100%;
}

動作するはずです

2
OZZIE

max-width: 100%のテーブルに対して非常にうまく機能するソリューションがあります。テーブルセル（見出しセルを除く）にWord-break: break-all;を使用して、すべての長いテキストを複数の行に分割します。

<!DOCTYPE html>
<html>
<head>
<style>

table {
  max-width: 100%; 
}
table td {
  Word-break: break-all;
}

</style>
</head>
<body>

<table border="1">
  <tr>
    <th><strong>Input</strong></th>
    <th><strong>Output</strong></th>
  </tr>
  <tr>
    <td>some text</td>
    <td>12b6459fc6b4cabb4b1990be1a78e4dc5fa79c3a0fe9aa9f0386d673cfb762171a4aaa363b8dac4c33e0ad23e4830888</td>
  </tr>
</table>

</body>
</html>

これは次のように表示されます（画面の幅が制限されている場合）：

0
Svetlin Nakov

max-widthは間違いなく十分にサポートされていません。使用する場合は、スタイルタグのメディアクエリで使用します。 iOS、Android、およびWindows Phoneのデフォルトメールはすべてそれらをサポートしています。 （GmailおよびOutlookモバイルはサポートしていません）

http://www.campaignmonitor.com/guides/mobile/targeting/

下部のスターバックスの例を見てください

0
zazzyzeph

私は使用しなければなりませんでした：

table, tbody {
    width: 100%;
}

tableだけでは十分ではなく、tbodyも必要でした。

0
Danny Beckett