Question

我的代码有两个困难，并提前感谢那些可以帮助我的人。我想把我的文字放在灰色的背景中心。我通过添加以下代码来实现中间位置：

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

但是当我这样做时，我在div中的部分文字消失了，我不知道为什么。另外我想得到建议，因为我想让这个表响应。我的目标是每个单元格作为一个块而不是另一个单元格，但我不确定是否可以使用我的实际代码。

＆＃13;

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;}

＆＃13;

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

＆＃13;

Answer 1

你在td上设置了内联样式，这是将样式添加到样式表中的最佳实践，这样可以更容易地看到样式的来源。

对于响应元素，请使用CSS @media查询。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp

＆＃13;

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

＆＃13;

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

＆＃13;

将文本居中在div中并使表格响应

1 个答案: