Soucis avec le CSS

Programmation
1

Bonsoir

Je viens de realiser le tableau de mendeleiev en html

aze
aze1138×523 75.7 KB

en ameliorant mon css notamment en ajoutant l attribut empty-cells:hide;

les cellules avec une couleur en background sur la premiere ligne disparaissent

az
az1569×757 151 KB

voici mon fichier CSS

t
t644×583 69.2 KB

sd
sd520×490 53.8 KB

Pourrais avoir des explications ?
Seconde interogation est il possible d avoir des cellules de meme taille ?

2

L’amélioration est donc très relative.
Si tu veux trouver de l’aide, en général c’est plus simple si tu joins le fichier html et le css (en fichier…) pour pouvoir reproduire, sinon bonne chance.

3

merci pour ton message le soucis est j ai du mal a poster directement du code sur ce forum

Voilà le CSS :

body{
	
	font-family:verdana,helvetica;
	font-size:12px;
	margin:auto;

}

th{
	border:thin solid royalblue;
	
	
	}

td{
	border:thin solid royalblue;
	padding:5px 7px;
	}
	
table{
	border-collapse:separate;
	border-radius:6px;
	margin:auto;
	empty-cells:hide;
	}	
	
	
.fushia{
	background-color:#ff00ff;
	
}

.purple{
	
	background-color:purple;
}

.green{
	
	background-color:#008000;
}

.yellow{
	background-color:#ffff00;
}
.silver{
	
	background-color:silver
}

.royalblue{
	background-color:royalblue;
}

.jaune{
	background-color:#f9e79f;
}

thead td{
	
	padding:2px 5px;
}

et le HTML :

<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8">
<meta name="keywords"  content="element,chimique">
<title>Mendeleiev</title>
<link rel="stylesheet"  href="style.css">

</head>


<body>

<table  contenteditable="true">
<thead>
<tr>
<th colspan="4"></th>
<th class="fushia"></th>
<th class="purple"></th>
<th class="fushia"></th>
<th class="silver"></th>
<th class="fushia"></th>
<th class="purple"></th>
<th class="yellow"></th>
<th class="green"></th>
<th class="yellow"></th>
<th class="royalblue"></th>
<td colspan="4"></td>
</tr>
    <tr>
        <td colspan="4"></td>
        <td><p>Métaux alcalins</p></td>
        <td><p>Métaux alcalino-terreux</p></td>
        <td><p>Métaux de transition</p></td>
        <td><p>Métaux pauvres</p></td>
        <td><p>Lanthanides</p></td>
        <td><p>Actinides</p></td>
        <td><p>Métalloides</p></td>
        <td><p>Non-métaux</p></td>
		<td><p>Hallogènes</p></td>
        <td><p>Gaz rares</p></td>
          <td colspan="4"></td> 
    </tr>




</thead>
<tbody>
<tr>
<td class="green"><h1>H</h1><p>1</p></td>
<td colspan="16"></td>
<td class="royalblue" ><h1>He</h1><p>2</p></td>
</tr>
<tr>
<td class="fushia"><h1>Li</h1><p>3</p></td>
<td class="jaune"><h1>Be</h1><p>4</p></td>
<td colspan="10"></td>
<td class="yellow" ><h1>B</h1><p>5</p></td>
<td class="green" ><h1>C</h1><p>6</p></td>
<td class="green" ><h1>N</h1><p>7</p></td>
<td class="green" ><h1>O</h1><p>8</p></td>
<td class="yellow"><h1>F</h1><p>9</p></td>
<td class="royalblue" ><h1>Ne</h1><p>10</p></td>

</tr>
<tr>
<td class="fushia"><h1>Na</h1><p>11</p></td>
<td class="jaune"><h1>Mg</h1><p>12</p></td>
<td colspan="10"></td>
<td class="silver" ><h1>Al</h1><p>13</p></td>
<td class="yellow"><h1>Si</h1><p>14</p></td>
<td class="green"><h1>P</h1><p>15</p></td>
<td class="green"><h1>S</h1><p>16</p></td>
<td class="yellow"><h1>Cl</h1><p>17</p></td>
<td class="royalblue"><h1>Ar</h1><p>18</p></td>

</tr>

<tr>
<td class="fushia"><h1>K</h1><p>19</p></td>
<td class="jaune"><h1>Ca</h1><p>20</p></td>
<td  class="fushia"><h1>Sc</h1><p>21</p></td>
<td class="fushia" ><h1>Ti</h1><p>22</p></td>
<td  class="fushia"><h1>V</h1><p>23</p></td>
<td  class="fushia"><h1>Cr</h1><p>24</p></td>
<td  class="fushia"><h1>Mn</h1><p>25</p></td>
<td class="fushia" ><h1>Fe</h1><p>26</p></td>
<td  class="fushia"><h1>Co</h1><p>27</p></td>
<td  class="fushia"><h1>Ni</h1><p>28</p></td>
<td class="fushia" ><h1>Cu</h1><p>29</p></td>
<td class="fushia" ><h1>Zn</h1><p>30</p></td>
<td class="silver"><h1>Ga</h1><p>31</p></td>
<td class="yellow"><h1>Ge</h1><p>32</p></td>
<td class="yellow"><h1>As</h1><p>33</p></td>
<td class="green"><h1>Se</h1><p>34</p></td>
<td class="yellow" ><h1>Br</h1><p>35</p></td>
<td class="royalblue"><h1>Kr</h1><p>36</p></td>

</tr>



<tr>

<td class="fushia"><h1>Rb</h1><p>37</p></td>
<td class="jaune"><h1>Sr</h1><p>38</p></td>
<td class="fushia"><h1>Y</h1><p>39</p></td>
<td class="fushia"><h1>Zr</h1><p>40</p></td>
<td class="fushia"><h1>Nb</h1><p>41</p></td>
<td class="fushia"><h1>Mo</h1><p>42</p></td>
<td class="fushia"><h1>Tc</h1><p>43</p></td>
<td class="fushia"><h1>Ru</h1><p>44</p></td>
<td  class="fushia"><h1>Rh</h1><p>45</p></td>
<td class="fushia" ><h1>Pd</h1><p>46</p></td>
<td class="fushia" ><h1>Ag</h1><p>47</p></td>
<td class="fushia" ><h1>Cd</h1><p>48</p></td>
<td class="silver"><h1>In</h1><p>49</p></td>
<td class="silver"><h1>Sn</h1><p>50</p></td>
<td class="yellow"><h1>Sb</h1><p>51</p></td>
<td class="yellow" ><h1>Te</h1><p>52</p></td>
<td class="yellow" ><h1>I</h1><p>53</p></td>
<td class="royalblue"><h1>Xe</h1><p>54</p></td>

</tr>

<tr>
<td class="fushia"><h1>Cs</h1><p>55</p></td>
<td class="jaune"><h1>Ba</h1><p>56</p></td>
<td class="purple"><h1>57-71</h1><p></td>
<td  class="fushia"><h1>Hf</h1><p>72</p></td>
<td class="fushia" ><h1>Ta</h1><p>73</p></td>
<td class="fushia" ><h1>W</h1><p>74</p></td>
<td class="fushia" ><h1>Re</h1><p>75</p></td>
<td class="fushia" ><h1>Os</h1><p>76</p></td>
<td  class="fushia"><h1>Ir</h1><p>77</p></td>
<td class="fushia" ><h1>Pt</h1><p>78</p></td>
<td  class="fushia"><h1>Au</h1><p>79</p></td>
<td class="fushia" ><h1>Hg</h1><p>80</p></td>
<td class="silver"><h1>Tl</h1><p>81</p></td>
<td class="silver" ><h1>Pb</h1><p>82</p></td>
<td class="silver"><h1>Bi</h1><p>83</p></td>
<td class="silver" ><h1>Po</h1><p>84</p></td>
<td class="yellow" ><h1>At</h1><p>85</p></td>
<td class="royalblue"><h1>Rn</h1><p>86</p></td>

</tr>





<tr>
<td class="fushia" ><h1>Fr</h1><p>87</p></td>
<td class="jaune"><h1>Ra</h1><p>88</p></td>
<td class="purple" ><h1>89-103</h1></td>
<td  class="fushia"><h1>Rf</h1><p>104</p></td>
<td class="fushia" ><h1>Db</h1><p>105</p></td>
<td class="fushia" ><h1>Sg</h1><p>106</p></td>
<td class="fushia" ><h1>Bh</h1><p>107</p></td>
<td class="fushia" ><h1>Hs</h1><p>108</p></td>
<td class="fushia" ><h1>Mt</h1><p>109</p></td>
<td  class="fushia"><h1>Ds</h1><p>110</p></td>
<td class="fushia" ><h1>Rg</h1><p>111</p></td>
<td  class="fushia"><h1>Cn</h1><p>112</p></td>
<td class="silver" ><h1>Uut</h1><p>113</p></td>
<td class="silver" ><h1>Fl</h1><p>114</p></td>
<td class="silver"><h1>Uup</h1><p>115</p></td>
<td class="silver" ><h1>Lv</h1><p>116</p></td>
<td class="yellow" ><h1>Uus</h1><p>117</p></td>
<td class="royalblue"><h1>Uuo</h1><p>118</p></td>

</tr>



<tr>
<td colspan="18"></td>

</tr>




<tr>
<td colspan="3"></td>
<td class="purple"><h1>La</h1><p>57</p></td>
<td class="purple"><h1>Ce</h1><p>58</p></td>
<td class="purple"><h1>Pr</h1><p>59</p></td>
<td class="purple"><h1>Nd</h1><p>60</p></td>
<td class="purple" ><h1>Pm</h1><p>61</p></td>
<td class="purple"><h1>Sm</h1><p>62</p></td>
<td class="purple" ><h1>Eu</h1><p>63</p></td>
<td class="purple"><h1>Gd</h1><p>64</p></td>
<td class="purple"><h1>Tb</h1><p>65</p></td>
<td class="purple"><h1>Dy</h1><p>66</p></td>
<td class="purple"><h1>Ho</h1><p>67</p></td>
<td class="purple" ><h1>Er</h1><p>68</p></td>
<td class="purple"><h1>Tm</h1><p>69</p></td>
<td class="purple"><h1>Yb</h1><p>70</p></td>
<td class="purple"><h1>Lu</h1><p>71</p></td>
</tr>








<tr>

<td colspan="3"></td>
<td class="purple" ><h1>Ac</h1><p>89</p></td>
<td class="purple" ><h1>Th</h1><p>90</p></td>
<td class="purple"><h1>Pa</h1><p>91</p></td>
<td class="purple"><h1>U</h1><p>92</p></td>
<td class="purple" ><h1>Np</h1><p>93</p></td>
<td class="purple" ><h1>Pu</h1><p>94</p></td>
<td class="purple"><h1>Am</h1><p>95</p></td>
<td class="purple" ><h1>Cm</h1><p>96</p></td>
<td class="purple"><h1>Bk</h1><p>97</p></td>
<td class="purple"><h1>Cf</h1><p>98</p></td>
<td class="purple" ><h1>Es</h1><p>99</p></td>
<td class="purple"><h1>Fm</h1><p>100</p></td>
<td class="purple"><h1>Md</h1><p>101</p></td>
<td class="purple"><h1>No</h1><p>102</p></td>
<td class="purple" ><h1>Lr</h1><p>103</p></td>

</tr>


<tbody>

</table>

</body>
</html>
4

Ça va déjà être plus simple avec le code.
Juste jeté un coup d’oeil (pas le temps now, ni demain), mais je ne vois pas de différence avec/sans ‹ empty-cells:hide; › .

remarque: j’aurais plutôt fait ça sans aucun tableau, mais uniquement des divisions (c’est plus flexible), mais dans ton cas, il faut clarifier le rôle de ‹ empty-cells:hide; ›

5

le but de empty-cells:hide;

est d empecher que les bordures des cellules vides s affichent

6

Heu oui en théorie, mais si elle sont vides, c’est donc plus précisément les bordures qu’il faut cacher.
Si ça ne marche pas, il faut creuser la logique de gestion des bordures du tableau pour voir ce qui empêcherait cette propriété ‹ empty-cells › que je n’avais jamais vu.
→ à vérifier si le html récent gère bien cette propriété…

apparemment oui: W3Schools CSS empty-cells demonstration

Et sans bordure… c’est pas mal non plus non ?

th{
/*	border:thin solid royalblue; */
	}

td{
/*	border:thin solid royalblue; */
    padding:5px 7px;
	}

―――――――――――
sinon, plutôt que de forcer des borders dans th et td, essaie simplement dans table:

th{
/*	border:thin solid royalblue;*/
	}

td{
/*	border:thin solid royalblue;*/
	padding:5px 7px;
	}
	
table{
	border:thin solid royalblue;
	border-collapse:separate;
	border-radius:6px;
	margin:auto;
	empty-cells:hide;
	}
7

Ce probleme est resolu

8

Parfait, si tu es satisfait uniquement avec le css.
Sinon, pour information l’explication de ‹ empty-cells:hide; › qui ne fonctionne pas vient de l’attribut contenteditable="true" dans le code html, d’où l’utilité d’accès au code html.

<table contenteditable="true">
en remplaçant simplement pas <table>, les cellules vides sont cachées.

9

Merci pour ton message Verner mais l enonce de l exercise exige cet attribut

10

On aura donc au moins appris que les attributs contenteditable et empty-cells sont conflictuels.