Bagaimana untuk mencapai kesan tersembunyi kandungan jadual dalam css

Dalam reka bentuk web, jadual adalah alat reka letak yang biasa digunakan. Walau bagaimanapun, apabila kandungan jadual melebihi lebar bekas, ia akan menyebabkan kecacatan pada reka letak halaman. Untuk menyelesaikan masalah ini, kita boleh menggunakan atribut limpahan dalam CSS untuk menyembunyikan kandungan jadual.

Dalam CSS, atribut limpahan mempunyai empat nilai yang mungkin: boleh dilihat (nilai lalai, membenarkan kandungan melebihi bekas), tersembunyi (bahagian yang berlebihan disembunyikan), tatal (menambah bar skrol pada bekas) dan auto (paparkan bar skrol yang diperlukan). Untuk jadual, kita boleh menggunakan nilai tersembunyi atau auto untuk menjadikan lebihan sel atau baris tersembunyi atau ditatal.

Berikut ialah contoh mudah untuk meletakkan jadual dengan berbilang baris dan lajur sel di dalam bekas:

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

Kami meletakkannya di dalam bekas yang mengandungi atribut limpahan Dalam bekas CSS :

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

Ini akan memastikan bahawa dalam kawasan dengan lebar maksimum 800 piksel, kandungan jadual boleh ditatal atau disembunyikan apabila diperlukan.

Kandungan yang melebihi bahagian bekas akan memaparkan bar skrol secara mendatar atau menegak. Jika anda mahu bar skrol dipaparkan dalam semua keadaan, anda boleh menggunakan nilai skrol.

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

Ini akan memaparkan bar skrol mendatar dan menegak.

Ringkasnya, kita boleh menggunakan atribut limpahan dalam CSS untuk mengendalikan kandungan jadual dengan betul apabila ia melebihi bekas, menjadikan reka letak halaman lebih cantik.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan tersembunyi kandungan jadual dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!