Comment obtenir l'effet caché du contenu d'un tableau en CSS

Dans la conception Web, les tableaux sont des outils de mise en page couramment utilisés. Cependant, lorsque le contenu du tableau dépasse la largeur du conteneur, cela entraînera des défauts dans la mise en page. Afin de résoudre ce problème, nous pouvons utiliser l'attribut overflow en CSS pour masquer le contenu du tableau.

En CSS, l'attribut overflow a quatre valeurs possibles : visible (valeur par défaut, permettant au contenu de dépasser le conteneur), Hidden (la partie excédentaire est masquée), scroll (ajout de barres de défilement au conteneur) et auto (affichage du scroll nécessaire barres) ). Pour les tableaux, nous pouvons utiliser des valeurs masquées ou automatiques pour masquer ou faire défiler les cellules ou lignes excédentaires.

Voici un exemple simple d'un tableau avec plusieurs lignes et colonnes de cellules placées à l'intérieur d'un conteneur :

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
        <th>Header 5</th>
        <th>Header 6</th>
        <th>Header 7</th>
        <th>Header 8</th>
        <th>Header 9</th>
        <th>Header 10</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
      <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
      </tr>
      <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
        <td>35</td>
        <td>36</td>
        <td>37</td>
        <td>38</td>
        <td>39</td>
        <td>40</td>
      </tr>
      <tr>
        <td>41</td>
        <td>42</td>
        <td>43</td>
        <td>44</td>
        <td>45</td>
        <td>46</td>
        <td>47</td>
        <td>48</td>
        <td>49</td>
        <td>50</td>
      </tr>
      <tr>
        <td>51</td>
        <td>52</td>
        <td>53</td>
        <td>54</td>
        <td>55</td>
        <td>56</td>
        <td>57</td>
        <td>58</td>
        <td>59</td>
        <td>60</td>
      </tr>
      <tr>
        <td>61</td>
        <td>62</td>
        <td>63</td>
        <td>64</td>
        <td>65</td>
        <td>66</td>
        <td>67</td>
        <td>68</td>
        <td>69</td>
        <td>70</td>
      </tr>
      <tr>
        <td>71</td>
        <td>72</td>
        <td>73</td>
        <td>74</td>
        <td>75</td>
        <td>76</td>
        <td>77</td>
        <td>78</td>
        <td>79</td>
        <td>80</td>
      </tr>
      <tr>
        <td>81</td>
        <td>82</td>
        <td>83</td>
        <td>84</td>
        <td>85</td>
        <td>86</td>
        <td>87</td>
        <td>88</td>
        <td>89</td>
        <td>90</td>
      </tr>
      <tr>
        <td>91</td>
        <td>92</td>
        <td>93</td>
        <td>94</td>
        <td>95</td>
        <td>96</td>
        <td>97</td>
        <td>98</td>
        <td>99</td>
        <td>100</td>
      </tr>
    </tbody>
  </table>
</div>

Nous le plaçons dans un conteneur CSS avec la propriété overflow :

.table-container {
  overflow: auto;
  max-width: 800px;
}

Cela garantira Dans une zone d'une largeur maximale de 800 pixels, le contenu du tableau peut être défilé ou masqué si nécessaire.

Le contenu qui dépasse la partie conteneur affichera des barres de défilement dans le sens horizontal ou vertical. Si vous souhaitez que la barre de défilement soit affichée en toutes circonstances, vous pouvez utiliser la valeur de défilement.

.table-container {
  overflow-x: scroll;
  overflow-y: scroll;
  max-width: 800px;
}

Cela affichera les barres de défilement horizontales et verticales.

En bref, nous pouvons utiliser l'attribut overflow en CSS pour gérer correctement le contenu du tableau lorsqu'il dépasse le conteneur, rendant ainsi la mise en page de la page plus belle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!