CSS에서 테이블 내용의 숨겨진 효과를 얻는 방법

웹 디자인에서 테이블은 일반적으로 사용되는 레이아웃 도구입니다. 그러나 테이블의 내용이 컨테이너의 너비를 초과하면 페이지 레이아웃에 결함이 발생할 수 있습니다. 이 문제를 해결하기 위해 CSS의 오버플로 속성을 사용하여 테이블 내용을 숨길 수 있습니다.

CSS에서 오버플로 속성에는 visible(기본값, 콘텐츠가 컨테이너를 초과하도록 허용), hide(초과 부분이 숨겨짐), 스크롤(컨테이너에 스크롤 막대 추가) 및 auto(필요한 스크롤 표시)의 네 가지 가능한 값이 있습니다. 바) ). 테이블의 경우 숨겨진 값이나 자동 값을 사용하여 초과 셀이나 행을 숨기거나 스크롤할 수 있습니다.

다음은 컨테이너 내부에 여러 행과 열의 셀이 있는 테이블의 간단한 예입니다.

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

오버플로 속성을 사용하여 CSS 컨테이너 내부에 배치합니다.

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

이렇게 하면 최대 너비의 영역 내에서 보장됩니다. 800픽셀의 표 내용은 필요할 때 스크롤하거나 숨길 수 있습니다.

컨테이너 부분을 초과하는 콘텐츠는 가로 또는 세로 방향으로 스크롤바가 표시됩니다. 모든 상황에서 스크롤 막대를 표시하려면 스크롤 값을 사용하면 됩니다.

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

가로 및 세로 스크롤 막대가 표시됩니다.

즉, CSS의 오버플로 속성을 사용하면 테이블 내용이 컨테이너를 초과할 때 적절하게 처리하여 페이지 레이아웃을 더욱 아름답게 만들 수 있습니다.

위 내용은 CSS에서 테이블 내용의 숨겨진 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!