Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mencapai kesan tersembunyi kandungan jadual dalam css

Bagaimana untuk mencapai kesan tersembunyi kandungan jadual dalam css

PHPz
PHPzasal
2023-04-26 16:38:04949semak imbas

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn