부트스트랩 테이블 특정 요소 모바일에서 제외시키기(보이지 않게) > HTML
HTML

부트스트랩 테이블 특정 요소 모바일에서 제외시키기(보이지 않게)

조회 14회 댓글 0건

테블릿까지 고려하면 좋지만 바쁜 관계로 모바일에서만 보이지 않게 하는 기능 입니다.

테이블의 TD에서 특정한것은 모바일에서는 빼주는 역활의 부트스트랩니다.



<!DOCTYPE html>
<html lang="ko">
<head>
  <title>부트스트랩 테이블 특정 요소 모바일에서 제외시키기(보이지 않게)</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

  <!-- //getbootstrap.com/docs/5.1/utilities/display/ -->
  <table class="table caption-top">
    <caption>사용자 목록</caption>
    <thead class="table-primary">
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col" class="d-none d-sm-block">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td class="d-none d-sm-block">Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td class="d-none d-sm-block">Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td class="d-none d-sm-block">the Bird</td>
        <td>@twitter</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Mark</td>
        <td class="d-none d-sm-block">Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">5</th>
        <td>Jacob</td>
        <td class="d-none d-sm-block">Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">6</th>
        <td>Larry</td>
        <td class="d-none d-sm-block">the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

</body>
</html>
 

소스에서 // 된부분은 https:// 이것으로 변경처리 해야 합니다. (여기서 링크 처리 때문에 변경해서 등록) 


아래를 보면 모두 보이다가 화면을 모바일 크기로 줄이면 Last 부분을 제외 시킵니다.

29d0e90e52f88aa17d856c122b84b1a7_1651838975_947.png 

 


29d0e90e52f88aa17d856c122b84b1a7_1651839005_4688.png
 

빼는 역활을 하는 것은 class="d-none d-sm-block" 이 부분 입니다.


한사람 한사람 소중하여 모든 기능이 있는것을 만들고 싶지만 그렇게 하려면 들어가는 것이 있습니다. 모든 것은 어떻게 들어가서 나오냐에 대한 문제로서 우선 모바일 세로 부분에 대한 부분만 적용이 되었습니다.




  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 4건 1 페이지
  • profile_image 사람의 기억은 알고 있는것과 꺼내는것과는 좀 다른것 같습니다.오래전부터 알고 있던것인데 갑자기 생각나서 확인하게 되었는데 수정할곳이 있군요.HTML 제대로 작성했는지 확인하는 사이트 입니다.아래 사이트에서 체크해서 내가 잘못 생각했거나 실수한 부분을 찾을 수 있습니다.브라우저에서 오류를 잘 보여주면 좋을텐데 일반적으론 보여주지 않기 때문에 자신도 잘 모릅니다.* HTML 문법체크 사이트 (유효성 검사) HTML 체크 주소체크 준비 - Nu Ht…
  • profile_image 웹봇으로 수집한것을 바탕으로 통계를 낸것입니다. 제가 잘 안쓰는것도 있네요.그런데 정말 이곳에 있는것만 익혀도 큰 무리는 없습니다. 그리고 이곳에 있는것만 익혀도 국내에선 안쓰는것들이 있어서 다른분들보다 많이 아실거란것 확신합니다.<html>, <head>, <body>, <title>, <meta>, <div>, <a>, <script>, <link&g…
  • profile_image 마크업 언어라고 하는데요. 웹페이지를 구현할때 기능적인 역활을 하는것입니다.HTML이 먼저이고 그 다음 CSS 입니다.즉, 건물로 말하면 골격이 있어야 거기에 대리석 타일을 붙이든 장식을 할 수 있습니다.HTML은 다음과 같은 기능을 가집니다.. table - 표형태로 데이터를 보여줍니다.. a - 다른 페이지와 연결을 시켜 줍니다.. form - 데이터를 받아서 서버쪽에 보내줍니다.. <h1 ~ - 제목에 대한 설정. <img - …