div内に3列の100％幅のテーブル

divのテーブルを使用してWebページを作成しようとしています。テーブルの幅は100％で、カラム数は3です。しかし、ウィンドウのサイズを変更すると、テーブルの幅が調整されません。div内に3列の100％幅のテーブル

これは私が使用しているコードです：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Test</title> 
</head> 

<body> 
<div style="width: 1400px; margin-left: auto; margin-right: auto"> 
    <table width="100%" border="0"> 
    <tbody> 
     <tr> 
     <td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td> 
     <td style="background-color: #DD185B; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td> 
     <td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 
</body> 
</html>

出典

2017-05-31 Nees

表は、親要素の100％の幅です。あなたの場合、親要素は1400pxの固定幅を持つDIVです。親DIVのwidthプロパティを削除します。 –

ちょうどあなたのwidth: 1400px

max-width: 1400px;に幅が固定されている変更、最大幅は、あなたが上がることができ、最大です。

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Test</title> 
 
</head> 
 

 
<body> 
 
    <div style="max-width: 1400px; margin-left: auto; margin-right: auto"> 
 
    <table width="100%" border="0"> 
 
     <tbody> 
 
     <tr> 
 
      <td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td> 
 
      <td style="background-color: #DD185B; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td> 
 
      <td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-05-31 17:47:26

Thnx m8！正常に動作します。 – Nees

@Nees受け入れられた答えに何が起こったか〜。〜？ –

わからない、もう一度受け入れてください。 – Nees

をテーブルの幅は、この場合、あなたのdivには、親要素の100％です。 divは1400pxに設定されているため、表は1400pxです。

出典

2017-05-31 17:43:18 Kee225

div widthはCSSプロパティを修正しています。

https://jsfiddle.net/jst9u4zv/

<div style="margin-left: auto; margin-right: auto"> 
    <table width="100%" border="0"> 
    <tbody> 
     <tr> 
     <td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td> 
     <td style="background-color: #DD185B; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td> 
     <td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td> 
     </tr> 
    </tbody> 
    </table> 
</div>

出典

2017-05-31 17:44:18 tech2017

div内に3列の100％幅のテーブル

答えて

関連する問題