HTML 및 CSS만 사용하여 반응형 테이블 만들기

HTML과 CSS만 사용하는 반응형 테이블을 사용하는 웹사이트가 많은데 웹사이트에 반응형 테이블을 추가하시겠습니까?

예!

긴 게시물을 작성할 때 더 나은 방법으로 설명하기 위해 반응형 표를 사용해야 하는 경우가 있습니다. 표는 독자가 쉽게 이해할 수 있도록 도와줍니다.

화면이 너무 작아 전체 콘텐츠를 표시할 수 없는 경우 반응형 테이블에 콘텐츠 가로 스크롤 막대가 표시됩니다. 장치 크기에 따라 브라우저 창 크기를 조정하십시오.

엄청난!

이제 HTML과 CSS만 사용하여 반응형 테이블을 제공할 차례입니다.

그럼 시작하겠습니다.

반응형 테이블 HTML 코드

<div>
 <table class="restable">
<caption class="rescap">Simple Responsive Data Table</caption>
<tbody>
<tr>
<th class="resth">Name</th>
  <th class="resth">Score</th>   
  <th class="resth">Status</th>
  </tr>

<tr class="restr">                                      
  <td data-label="Name" class="restd">Ravi</td>
  <td data-label="Marks" class="restd">178</td>
  <td data-label="Status" class="restd">Pass</td>
  </tr>
<tr class="restr"> 
  <td data-label="Name" class="restd">Prem</td>
  <td data-label="Marks" class="restd">169</td>
  <td data-label="Status" class="restd">Pass</td>
  </tr>
<tr class="restr"> 
  <td data-label="Name" class="restd">Alex</td>
  <td data-label="Marks" class="restd">97</td>
  <td data-label="Status" class="restd">Fail</td>
  </tr>
<tr class="restr"> 
  <td data-label="Name" class="restd">Gale</td>
  <td data-label="Marks" class="restd">120</td>
  <td data-label="Status" class="restd">Pass</td>
  </tr>
</tbody></table>
</div>

순수 CSS만 사용한 반응형 테이블

/*CSS for Responsive Table By technicalarp.com*/
  .restable
   {border-collapse:collapse;
   width:100%;
   overflow: hidden;
   }
   .rescap{
     border-left:4px solid #009879;
     padding:15px;
 font-family:georgia;
 font-weight:bold;
 font-size:20px;
 background-color:#dddddd;
 color:#990a00;
 text-align:left;
 overflow:hidden;
 margin-bottom:4px;
 width:100%;
 }
.resth{ 
    padding:12px 15px;
    background-color:#009879;
    color:#ffffff;
    font-family:georgia;
    font-size:20px;
    font-weight:bold;
    border:1px solid #dddddd;
    text-align:center;
    }
.restr{
    border:1px solid #dddddd;}
 .restd{padding:12px 15px;
    font-family:arial;
    font-size:20px;
    text-align:center;
    border:1px solid #dddddd;
    }
.restr:last-of-type{
    border-bottom: 2px solid #009879;
    }
.restr:nth-of-type(even){
    background-color: #f3f3f3;
    }

위의 표가 효과가 있다면 축하합니다. 그렇지 않다면 다른 코드를 시도해 보십시오.

5개 이상의 반응형 테이블 코드를 사용해보고 싶습니까?

부트스트랩 테이블 코드, 순수 CSS 코드 등을 찾을 수 있습니다: Add Responsive Table In Blogger

다시 한 번, 방문해 주셔서 감사합니다. 더 많은 놀라운 콘텐츠를 보려면 팔로우하세요.

새로운 가치 있는 콘텐츠로 만나요.