divにテキストを配置してテーブルを反応させる

Question

私のコードには2つの困難があり、私を助けることができる人々のために事前に感謝しています。テキストを背景の灰色の中央に配置したい私はこのコードの行を追加することによって、真ん中に置くことを実現：

line-height: 90px; 
    text-align: center; 

しかし、ときに私はそうdivの中に私のテキストの特定の部分が消えないと私は理由を知りません。さらに、私はこの表を反応的にしたいので、アドバイスを受けたいと思っていました。私の目標は、各セルがブロックとして動作し、別のセルの下に行くことですが、実際のコードで可能かどうかはわかりません。

table{ 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    font-family: 'Varela Round'; 
 
} 
 

 
th, td { 
 
    overflow:hidden; 
 
    font-family: 'Varela Round'; 
 
    width:100%; 
 
} 
 

 
th{line-height:3;} 
 
td{line-height:1.4;} 
 

 
#base{background-color:#07183D;color:white;font-family: 'Varela Round';} 
 
#intermediaire{background-color:#8A012C;color:white;font-family: 'Varela Round';} 
 
#avance{background-color:#022C8A;color:white;font-family: 'Varela Round';} 
 
#complet{background-color:#3B570A;color:white;font-family: 'Varela Round';} 
 

 
.title600{font-size:18px; letter-spacing:1.5px;}

<table> 
 
    <tr> 
 
     <th><center><div id="base" style="z-index: 1000; width: 258px; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"> 
 
     <h2 class="title600">BASE</h2> 
 
     </div></center></th> 
 
     <th><center><div id="intermediaire" style="z-index: 1000; width: 258px; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"> 
 
     <h2 class="title600">INTERMÉDIAIRE</h2> 
 
     </div></center></th> 
 
     <th><center><div id="avance" style="z-index: 1000; width: 258px; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"> 
 
     <h2 class="title600">AVANCÉ</h2> 
 
     </div></center></th> 
 
     <th><center><div id="complet" style="z-index: 1000; width: 258px; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"> 
 
     <h2 class="title600">COMPLET</h2> 
 
     </div></center></th> 
 
    </tr> 
 
    <tr> 
 
     <td><center><div style="width:258px;text-align:justify;font-size: 12px">Cette formule vous permet de connaître les entreprises présentes sur ce territoire et de le valider </div></center></td> 
 
    <td><center><div style="width:258px;text-align:justify;font-size: 12px">texte</center></td> 
 
    <td><center><div style="width:258px;text-align:justify;font-size: 12px">texte</center></td> 
 
    <td><center><div style="width:258px;text-align:justify;font-size: 12px">texte</center></td> 
 
    </tr> 
 
    <tr> 
 
    <td><center><div style="width:258px;height:100px;text-align:justify;background:grey;"><b>Inclut</b>: la liste des sociétés</div></center></td> 
 
    <td><center><div style="width:258px; height:100px;text-align:justify;background:grey;"><b>Inclut</b>: la liste des société + les contacts</div></center></td> 
 
    <td><center><div style="width:258px; height:100px;text-align:justify;background:grey; 
 
;"><b>Inclut</b>: la liste des société + les contacts + les mails nominatifs</div></center></td> 
 
    <td><center><div style="width:258px; height:100px;text-align:justify;background:grey;"><b>Inclut</b>: la liste des société + les contacts + les mails nominatifs + les lignes directes (fixes et/ou mobiles)</div></center></td> 
 
    </tr></table>

Answer 1

あなたは、スタイルシートにスタイルを追加するには、TDの、その最高のpracticsに設定されたインラインスタイルを持っている、これはスタイルがどこから来ている、それははるかに容易に見ることになります。

応答要素の場合、CSS @mediaクエリを使用します。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp

body{ 
 
\t font-family: 'Varela Round'; 
 
} 
 
table { 
 
    width: 100%; 
 
} 
 
th{ 
 
\t line-height:3; 
 
\t text-align: center; 
 
} 
 
th div { 
 
    max-width: 258px; 
 
    margin: 0 auto; 
 
} 
 
td{ 
 
\t line-height:1.4; 
 
\t text-align: center; 
 
} 
 
td div { 
 
    max-width: 258px; 
 
    margin: 0 auto; 
 
} 
 
#base{ 
 
\t background-color: 
 
\t #07183D; 
 
\t color:white; 
 
} 
 
#intermediaire{ 
 
\t background-color:#8A012C;color:white; 
 
} 
 
#avance{ 
 
\t background-color:#022C8A; 
 
\t color:white; 
 
} 
 
#complet{ 
 
\t background-color:#3B570A; 
 
\t color:white; 
 
} 
 
.title600{ 
 
\t font-size:18px; 
 
\t letter-spacing:1.5px; 
 
} 
 
.grey { 
 
    background: #CCC; 
 
    max-width: 258px; 
 
    margin: 0 auto; 
 
} 
 
@media only screen and (max-width: 500px) { 
 
\t th,td,tr{ 
 
\t \t width: 100%; 
 
\t \t display: block; 
 
\t } 
 
    
 
}

<table> 
 
    <tr> 
 
     <th><div id="base"> 
 
     <h2 class="title600">BASE</h2> 
 
     </div></th> 
 
     <th><div id="intermediaire"> 
 
     <h2 class="title600">INTERMÉDIAIRE</h2> 
 
     </div></th> 
 
     <th><div id="avance"> 
 
     <h2 class="title600">AVANCÉ</h2> 
 
     </div></th> 
 
     <th><div id="complet""> 
 
     <h2 class="title600">COMPLET</h2> 
 
     </div></th> 
 
    </tr> 
 
    <tr> 
 
     <td><div>Cette formule vous permet de connaître les entreprises présentes sur ce territoire et de le valider </div></td> 
 
    <td><div>texte</div></td> 
 
    <td><div>texte</div></td> 
 
    <td><div>texte</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td><div class="grey"><b>Inclut</b>: la liste des sociétés</div></td> 
 
    <td><div class="grey"><b>Inclut</b>: la liste des société + les contacts</div></td> 
 
    <td><div class="grey"><b>Inclut</b>: la liste des société + les contacts + les mails nominatifs</div></td> 
 
    <td><div class="grey"><b>Inclut</b>: la liste des société + les contacts + les mails nominatifs + les lignes directes (fixes et/ou mobiles)</div></td> 
 
    </tr></table>