# Bordures de cellules vide

**URL:** <https://www.debian-fr.org/t/bordures-de-cellules-vide/87061>\
**Category:** Programmation\
**Created:** [Août 30, 2022, 8:17 UTC](https://www.debian-fr.org/t/bordures-de-cellules-vide/87061 "2022-08-30T08:17:05Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Août 30, 2022, 8:17 UTC](https://www.debian-fr.org/t/bordures-de-cellules-vide/87061/1 "2022-08-30T08:17:05Z")

</div>

Bonjour

je realise le tableau de mendeleiev

 ![11](https://www.debian-fr.org/uploads/default/original/2X/9/90300c2534d8100f4a33e03c61e3768333c4622f.jpeg)

mon code html

```html
<!DOCTYPE html>

<html>
    <head>

      <meta charset="utf-8">
      <title>Mendeleiev</title>
      <link rel="stylesheet" type="text/css" href="style.css">
    

    </head>
       <body>
        

      <table class="tab" contenteditable="true">

        <thead>
         <tr>

            <th>&#160;</th>
            <th>&#160;</th>
            <th>&#160;</th>
            <th>&#160;</th>
            <th>&#160;</th>
            <th>&#160;</th>
            <th>&#160;</th>
            <th>&#160;</th>
            <th>&#160;</th>
            <th>&#160;</th>
         </tr>
         <tr>
         <td class="bg-fushia">Métaux alcalins</td>
         <td class="bg-purple">Métaux alcalino-terreux</td>
         <td class="bg-fushia">Métaux de transition</td>
         <td class="bg-silver">Métaux pauvres</td>
         <td class="bg-fushia">Lanthanides</td>
         <td class="bg-purple">Actinides</td>
         <td class="bg-yellow">Métalloides</td>
         <td class="bg-green">Non-métaux</td>
         <td class="bg-yellow">Halogènes</td>
         <td class="bg-blue">Gaz rares</td>

         </tr>

        </thead>

         <tbody>

            <tr>
             <td class="bg-green"><p>H</p> <p>1</p></td>
             <td colspan="16">&#160;</td>
             <td class="bg-blue" ><p>He</p> <p>2</p></td>
             
             
            </tr>

            <tr>
                <td class="bg-fushia"> <p>Li</p> <p>3</p></td>
                <td class="bg-yellow"><p>Be</p> <p>4</p></td>
                <td colspan="10">&#160;</td>
                <td class="bg-yellow"><p>B</p><p>5</p></td>
                <td class="bg-green" ><p>C</p><p>6</p></td>
                <td class="bg-green" ><p>N</p><p>7</p></td>
                <td class="bg-green" ><p>O</p><p>8</p></td>
                <td class="bg-yellow" ><p>F</p><p>9</p></td>
                <td class="bg-blue"> <p>Ne</p> <p>10</p></td>
            

                
        
            </tr>

            <tr>
                <td class="bg-fushia"><p>Na</p><p>11</p></td>
             <td class="bg-yellow" ><p>Mg</p><p>12</p></td>
             <td colspan="10">&#160;</td>
             <td class="bg-silver"><p>Al</p><p>13</p></td>
             <td class="bg-yellow"><p>Si</p><p>14</p></td>
             <td class="bg-green" ><p>P</p><p>15</p></td>
             <td class="bg-green"><p>S</p><p>16</p></td>
             <td class="bg-yellow"><p>Cl</p><p>17</p></td>
             <td class="bg-blue"><p>Ar</p><p>18</p></td>
             
            </tr>

            <tr>
                <td class="bg-fushia"> <p>K</p> <p>19</p></td>
                <td class="bg-yellow"><p>Ca</p><p>20</p></td>
                <td class="bg-fushia"><p>Sc</p><p>21</p></td>
                <td class="bg-fushia"><p>Ti</p><p>22</p></td>
                <td class="bg-fushia"><p>V</p><p>23</p></td>
                <td class="bg-fushia"><p>Cr</p><p>24</p></td>
                <td class="bg-fushia"><p>Mn</p><p>25</p></td>
                <td class="bg-fushia"><p>Fe</p><p>26</p></td>
                <td class="bg-fushia"><p>Co</p><p>27</p></td>
                <td class="bg-fushia"><p>Ni</p><p>28</p></td>
                <td class="bg-fushia"><p>Cu</p><p>29</p></td>
                <td class="bg-fushia"><p>Zn</p><p>30</p></td>
                <td class="bg-silver"><p>Ga</p><p>31</p></td>
                <td class="bg-yellow" ><p>Ge</p><p>32</p></td>
                <td class="bg-yellow" ><p>As</p><p>33</p></td>
                <td class="bg-green"><p>Se</p><p>34</p></td>
                <td class="bg-yellow"><p>Br</p><p>35</p></td>  
                <td class="bg-blue"><p>Kr</p><p>36</p></td>
            </tr>
            <tr>
                <td class="bg-fushia"><p>Rb</p><p>37</p></td>
                <td class="bg-yellow" ><p>Sr</p><p>38</p></td>
                <td class="bg-fushia"><p>Y</p><p>39</p></td>
                <td class="bg-fushia"><p>Zr</p><p>40</p></td>
                <td class="bg-fushia"><p>Nb</p><p>41</p></td>
                <td class="bg-fushia"><p>Mo</p><p>42</p></td>
                <td class="bg-fushia" ><p>Tc</p><p>43</p></td>
                <td class="bg-fushia"><p>Ru</p><p>44</p></td>
                <td class="bg-fushia"><p>Rh</p><p>45</p></td>
                <td class="bg-fushia"><p>Pd</p><p>46</p></td>
                <td class="bg-fushia"><p>Ag</p><p>47</p></td>
                <td class="bg-fushia"><p>Cd</p><p>48</p></td>
                <td class="bg-silver"><p>In</p><p>49</p></td>
                <td class="bg-silver"><p>Sn</p><p>50</p></td>
                <td class="bg-yellow" ><p>Sb</p><p>51</p></td>
                <td class="bg-yellow"><p>Te</p><p>52</p></td>
                <td class="bg-yellow"><p>I</p><p>53</p></td>
                <td class="bg-blue"><p>Xe</p><p>54</p></td>  
            </tr>

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

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

         </tbody>

            <tfoot>

          <tr>

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

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

          </tr>

            </tfoot>

      </table>

       </body>

</html>

```

mon css

```css
body{
    font-family: verdana,sans-serif;
    background-image: url('');
    background-attachment:fixed;
}

table{
    margin-left: auto;
    margin-right:auto;
    border-collapse:separate;
    
    }

td{
   width: 1em;
    margin: auto;
    border: 1px solid royalblue;
    
    }

td[class="bg-"]:before{
    border:thin solid royalblue;
    border-radius: 1%;
    background-repeat: no-repeat;

}

.bg-green{background-color:#080;}
.bg-purple{background-color:#8a2be2;}
.bg-fushia{background-color:#f0f;}
.bg-yellow{background-color:#ffd700;}
.bg-silver{background-color:#c0c0c0;}
.bg-blue{background-color:#4169e1;}

.tab{
    empty-cells:hide;
}

```

les bordures des cellules vide ne disparaissent pas malgre l’attribut empty-cells:hide; sur l attribut table

puis avoir des explications ?

Merci

---

<div class="post-metadata">

**Author:** ![Almtesh](https://www.debian-fr.org/user_avatar/www.debian-fr.org/almtesh/32/10312_2.png) [@Almtesh](https://www.debian-fr.org/u/Almtesh)\
**Post date:** [Août 30, 2022, 9:49 UTC](https://www.debian-fr.org/t/bordures-de-cellules-vide/87061/2 "2022-08-30T09:49:26Z")

</div>

Bonjour,

Ah, le retour du tableau de classification périodique des éléments.

> [@Pat66](#):
>
> les bordures des cellules vide ne disparaissent pas malgre l’attribut empty-cells:hide; sur l attribut table

Je viens de tester des trucs de mon côté et j’ai un résultat sensiblement analogue, ce truc ne fonctionne pas.  
Même [là](https://www.w3schools.com/cssref/tryit.asp?filename=trycss_empty-cells), ça ne fonctionne pas, je pense que je dois rater un truc.

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Août 30, 2022, 9:53 UTC](https://www.debian-fr.org/t/bordures-de-cellules-vide/87061/3 "2022-08-30T09:53:34Z")

</div>

Bonjour

Pourquoi tu ecris le retour du tableau periodique des elements ?

---

<div class="post-metadata">

**Author:** ![Almtesh](https://www.debian-fr.org/user_avatar/www.debian-fr.org/almtesh/32/10312_2.png) [@Almtesh](https://www.debian-fr.org/u/Almtesh)\
**Post date:** [Août 30, 2022, 9:59 UTC](https://www.debian-fr.org/t/bordures-de-cellules-vide/87061/4 "2022-08-30T09:59:53Z")

</div>

> [@Pat66](#):
>
> Pourquoi tu ecris le retour du tableau periodique des elements ?

Je ne sais pas, il me semble que c’est le deuxième ou troisième sujet que tu ouvres avec cet exemple.  
Mais, ce n’est pas une critique, je l’aime beaucoup ce tableau, et puis, c’est un très bon exercice avec ces nombreuses cellules vides.  
Juste un petite remarque sur ton implémentation, je te conseille de mettre la légende sur un tableau différent pour éviter de déformer les cases en dessous et d’éviter d’utiliser les mêmes couleurs pour des trucs différents.

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Août 30, 2022, 10:03 UTC](https://www.debian-fr.org/t/bordures-de-cellules-vide/87061/5 "2022-08-30T10:03:07Z")

</div>

je pense pas avoir poste sur ce forum mais sur une autre plate forme j avais obtenus de l aide pour le realiser.

J ai decide de le refaire par moi meme et je constate beaucoup de chose ne marche plus

---

<div class="post-metadata">

**Author:** ![Almtesh](https://www.debian-fr.org/user_avatar/www.debian-fr.org/almtesh/32/10312_2.png) [@Almtesh](https://www.debian-fr.org/u/Almtesh)\
**Post date:** [Août 30, 2022, 10:24 UTC](https://www.debian-fr.org/t/bordures-de-cellules-vide/87061/6 "2022-08-30T10:24:10Z")

</div>

Je l’ai trouvé, c’est [ici](https://www.debian-fr.org/t/soucis-avec-le-css/86914) et il est aussi question de ce style et ça avait fonctionné.

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Août 30, 2022, 10:36 UTC](https://www.debian-fr.org/t/bordures-de-cellules-vide/87061/7 "2022-08-30T10:36:56Z")

</div>

ok  
en effet ca a fonctionne mais je comprends pas pourquoi a present ca ne fonctionne plus ?  
j ai repris [ca](https://www.developpez.net/forums/d2136262/webmasters-developpement-web/mise-page-css/mise-forme-d-table/)

mais ca marche pas non plus !!!

---

<div class="post-metadata">

**Author:** ![josephtux](https://www.debian-fr.org/user_avatar/www.debian-fr.org/josephtux/32/3985_2.png) [@josephtux](https://www.debian-fr.org/u/josephtux)\
**Post date:** [Août 30, 2022, 11:37 UTC](https://www.debian-fr.org/t/bordures-de-cellules-vide/87061/8 "2022-08-30T11:37:13Z")

</div>

Le tableau serait-il plus ou moins lisible sans les bordures ?

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Août 30, 2022, 12:11 UTC](https://www.debian-fr.org/t/bordures-de-cellules-vide/87061/9 "2022-08-30T12:11:00Z")

</div>

il est question ici de bordures de cellules vide

---

<div class="post-metadata">

**Author:** ![dindoun](https://www.debian-fr.org/user_avatar/www.debian-fr.org/dindoun/32/4281_2.png) [@dindoun](https://www.debian-fr.org/u/dindoun)\
**Post date:** [Août 30, 2022, 1:26 UTC](https://www.debian-fr.org/t/bordures-de-cellules-vide/87061/10 "2022-08-30T13:26:25Z")

</div>

> [@Pat66](#):
>
> `.tab`

salut  
j’ai regardé rapiement, mais je n’ai pas vu de class=tab

j’en profite pour montrer le mien en cours de création

> **[Tableau Périodique Version 1.2.1](https://physique.dindoun.lautre.net/TableauPeriodiqueElements/Tableau%20Periodique%20Version%201.2.1.html)**
>
> brunosanchiz.free.fr

ah si je viens de voir table class=tab

à mon avis il devrait être sur les `<td> pas le <table>`

en fait non

la bordure vient de td {border: 1px solid royalblue;}

conseil firefox :  
tu cliques droit sur une cellule et menu inspecter  
menu inspecteur  
dans règles tu vois les styles que tu as aplliqués dans ton css  
dans calculé tu as un champ de recherche, tu tapes border et tu coches styles navigateurs

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Août 30, 2022, 2:34 UTC](https://www.debian-fr.org/t/bordures-de-cellules-vide/87061/11 "2022-08-30T14:34:00Z")

</div>

J ai trouve l origine du probleme j ai ajoute

```html
&#160; 

```

aux cellules vides en le retirant tout marche.

 ![777](https://www.debian-fr.org/uploads/default/original/2X/9/9712bc86493533a2f6ec0bdc746dee5e0fbf0b06.jpeg)

a present le souci est je voudrais ameliorer l affichage du texte dans les cellules d en haut .  
des idées SVP?

---

<div class="post-metadata">

**Author:** ![dindoun](https://www.debian-fr.org/user_avatar/www.debian-fr.org/dindoun/32/4281_2.png) [@dindoun](https://www.debian-fr.org/u/dindoun)\
**Post date:** [Août 30, 2022, 3:14 UTC](https://www.debian-fr.org/t/bordures-de-cellules-vide/87061/12 "2022-08-30T15:14:34Z")

</div>

w3c:

- **Warning** : Consider adding a `lang` attribute to the `html` start tag to declare the language of this document.[From line 1, column 16; to line 3, column 6](https://validator.w3.org/nu/#l3c6) `TYPE html>↩↩<html>↩ <` For further guidance, consult [Declaring the overall language of a page](https://www.w3.org/International/techniques/authoring-html.en?open=language&open=textprocessing#textprocessing) and [Choosing language tags](https://www.w3.org/International/techniques/authoring-html.en?open=language&open=langvalues#langvalues).If the HTML checker has misidentified the language of this document, please [file an issue report](https://github.com/validator/validator/issues/new) or [send e-mail to report the problem](mailto:www-validator@w3.org).
- **Warning** : A table row was 18 columns wide and exceeded the column count established by the first row (10).[From line 58, column 58; to line 61, column 17](https://validator.w3.org/nu/#l61c17) `2</p></td>↩ ↩ ↩ </tr>↩↩↩ `
