100% largeur table avec trois colonnes en div

J'essaie de faire une page Web avec une table dans un div. La table a une largeur de 100% avec trois colonnes. Mais lorsque je redimensionne la fenêtre, la table ne modifie pas sa largeur.100% largeur table avec trois colonnes en div

Ce code J'utilise:

<!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>

Source

2017-05-31 Nees

table est une largeur de 100% de l'élément parent. Dans votre cas, l'élément parent est un DIV avec une largeur fixe de 1400px. Supprimez la propriété width du parent DIV. –

il suffit de changer votre width: 1400px-max-width: 1400px;

largeur est fixée, largeur max est le maximum que vous pouvez aller jusqu'à.

<!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>

Source

2017-05-31 17:47:26

Thnx m8! Fonctionne bien. – Nees

@Nee ce qui est arrivé à la réponse acceptée ~. ~? –

Ne sait pas, l'a accepté à nouveau. – Nees

La largeur de la table est de 100% de l'élément parent, dans ce cas, votre div. Votre div est fixé à 1400px, donc la table est également 1400px.

Source

2017-05-31 17:43:18 Kee225

La largeur div corrige la propriété 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>

Source

2017-05-31 17:44:18 tech2017

100% largeur table avec trois colonnes en div

Répondre

Questions connexes