2017-05-08 14 views
0

私はテーブル形式で電子メールをレイアウトしています。私の目標は、行のサイズ変更の残りの部分を使わずに「詳細」のサイズを変更することです。提供された画像の効果の何か:テーブル内の1つのセルの幅を変更

MOCK-UP

width属性を追加しようとしましたが、機能しませんでした。

<table style="background-color: #a9cfee;"> 
    <tr style="border: none; font-family: arial, sans-serif; color:white; font-size: 43px; text-align: left; "> 
     <td> 
      <strong>ELITE GROOMING TUB</strong> 
     </td> 
     <td rowspan="3"> 
      <img src="tub.png"> 
     </td> 
    </tr> 
    <tr> 
     <td style="border: none; font-family: arial, sans-serif; color:white; font-size: 15px; text-align: left;"> 
      We have made our premium tub even better. Stairs are extra sturdy but lighter weight. With the flick of a foot, they slide underneath the tub. 
     </td> 
    </tr> 
    <tr> 
     <td style="border: none; font-family: arial, sans-serif; color:white; font-size: 15px; font-weight: 800; background-color: #0033a0; width: 50%;"> 
      Learn More 
    </tr> 
    </tbody> 
</table> 

答えて

1

イメージが表示されたので、私は自分の答えを完全に改訂しています。

あなたのテーブル構造は、現在表示しているようには表示されません。

たとえば、浴槽の列には<td rowspan="3">があります。最初の行の2つのセルの幅を追加して、物の流れを良くする必要があります。

ボタンはテーブルの幅もコントロールしていました。私はそれがあなたがテーブルの幅に影響を与えずにボタンの幅を制御することができるように、セル内の別々のテーブルにサイジングを入れます。

幸運。

<table style="background-color: #a9cfee;" border="1" width="580"> 
<tr style="border: none; font-family: arial, sans-serif; color:white; font-size: 43px; text-align: left; "> 
    <td width="80%"> 
     <strong>ELITE GROOMING TUB</strong> 
    </td> 
    <td rowspan="3" width="20%"> 
     <img src="tub.png"> 
    </td> 
</tr> 
<tr> 
    <td style="border: none; font-family: arial, sans-serif; color:white; font-size: 15px; text-align: left;"> 
     We have made our premium tub even better. Stairs are extra sturdy but lighter weight. With the flick of a foot, they slide underneath the tub. 
    </td> 
</tr> 
<tr> 
    <td align="center" style="font-family: arial, sans-serif; color:white; font-size: 15px; font-weight: 800; text-align:center;"> 

     <table align="center" border="0"> 
     <tr> 
      <td style="border: none; font-family: arial, sans-serif; color:white; font-size: 15px; font-weight: 800; background-color: #0033a0; width:200px; text-align:center;">Learn More</td> 
     </tr> 
     </table> 
    </td> 
</tr> 
</tbody> 

https://jsfiddle.net/wallyglenn/53ucukpo/

+1

うん、これは移動するための方法です。あなたの外の '

'を全幅にして、もう1つ、より狭い '
'をボタンのためだけに保ちます。 –

関連する問題