So erzielen Sie den versteckten Effekt von Tabelleninhalten in CSS

Im Webdesign sind Tabellen häufig verwendete Layout-Tools. Wenn der Inhalt der Tabelle jedoch die Breite des Containers überschreitet, führt dies zu Fehlern im Seitenlayout. Um dieses Problem zu lösen, können wir das Overflow-Attribut in CSS verwenden, um den Inhalt der Tabelle auszublenden.

In CSS hat das Überlaufattribut vier mögliche Werte: sichtbar (Standardwert, sodass der Inhalt den Container überschreiten kann), versteckt (der überschüssige Teil wird ausgeblendet), Scroll (Hinzufügen von Bildlaufleisten zum Container) und Auto (Anzeige des erforderlichen Bildlaufs). Balken) ). Für Tabellen können wir versteckte oder automatische Werte verwenden, um überschüssige Zellen oder Zeilen auszublenden oder zu scrollen.

Hier ist ein einfaches Beispiel einer Tabelle mit mehreren Zeilen und Spalten von Zellen, die in einem Container platziert sind:

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

Wir platzieren sie in einem CSS-Container mit der Überlaufeigenschaft:

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

Dadurch wird sichergestellt, dass sie innerhalb eines Bereichs mit maximaler Breite liegt Bei einer Auflösung von 800 Pixeln kann der Tabelleninhalt bei Bedarf gescrollt oder ausgeblendet werden.

Bei Inhalten, die über den Containerteil hinausgehen, werden Bildlaufleisten in horizontaler oder vertikaler Richtung angezeigt. Wenn Sie möchten, dass die Bildlaufleiste unter allen Umständen angezeigt wird, können Sie den Bildlaufwert verwenden.

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

Dadurch werden horizontale und vertikale Bildlaufleisten angezeigt.

Kurz gesagt, wir können das Überlaufattribut in CSS verwenden, um den Tabelleninhalt richtig zu verarbeiten, wenn er den Container überschreitet, wodurch das Layout der Seite schöner wird.

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den versteckten Effekt von Tabelleninhalten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!