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

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

조회 199회 댓글 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" 이 부분 입니다.


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


* 참고사항

위와 같이 했을때 라인이 틀어지지 않고 잘 나오면 사용 해도 됩니다.

그런데 th, td에서 사용했을때 다른 셀에 있는것과 다르게 라인이 틀어지만 아래것을 사용해야 됩니다.

 class="d-none d-sm-table-cell"






  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 11건 1 페이지
  • profile_image 파일 첨부할때 사용합니다.기본이 모든 파일로 되어 있는데 특정 워드파일만 받고 싶다든지 아니면jpg 이미지만 받고 싶을때 선택을 그것만 가능하게 하는 방법에 대한 것입니다. accept 속성에 MIME 값을 넣어주면 됩니다.    <!-- 모든것을 보여줄 때는 아래처럼 하면 된다: 순서대로 오디오,동영상,이미지 -->  <input type="file" accept="audio/*">  <input type="file…
  • profile_image 부트스트랩에서는 대부분 영문의 약자를 생각하면 되면 되는데 문제는 왼쪽, 오른쪽이 아니라 시작, 끝 인것이 있다는 것이다.마진: m패딩: p * 위, 아래top: tbottom: b * 왼쪽 오른쪽 보다는 시작과 끝으로 생각하면 된다.left: sright: e * 포함이다.즉 위아래는 top, bottom이 되고 x는 left, right가 되는것이다.위아래:  y ( left / right )양옆: x (top / bottom)위와 별도로 …
  • profile_image 원하는 것은 이런것입니다.메시지를 보여주고 닫기 버튼만 있어서 닫을 수 있게 하는것이 없네요. 많이 사용할텐데 좀 만들지? 버전이 5.2까지 올라오면서 왜? 그랬을까 하는 생각이 먼저 듭니다.** 부트스트랩 모달 닫기버튼만 보이도록 하기 **<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta…
  • profile_image 부트스트랩 연습하는데 한쪽으로 쏠립니다.다운데로 버튼을 보내고 싶은데요 생각처럼 되지 않아 찾아 보아 정리 한것입니다.다른것들도 방법은 비슷합니다. 가운데 정렬하고 싶을대 말입니다. 테이블 같은것도 비슷한 원리 입니다. 부트스트랩 버튼을 가운데(중앙) 정렬하기 <div class="row">  <div class="col text-center">    <!-- <button class="btn btn-primar…
  • profile_image 빌더는 처음 사용하는 개발자에게는 상당히 유용 합니다.다운로드를 클릭해야 소스를 볼 수 있습니다.부트 스트랩 빌더https://www.layoutit.com/build 부트스트랩 레이아웃http://shoelace.io/만들어진 레레이아웃 위것 예제https://webruden.tistory.com/76화면 크기별 레이아웃https://blogpack.tistory.com/823
  • profile_image DivTable.com 이란곳에서 가져온것입니다.이 사이트 방문하면 마우스로 끌어서 쉽게 만들 수 있는 방법을 보여 줍니다.테이블은 표이기 때문에 이것으로 레이아웃을 만들지 말라는것입니다. 표 인줄 착각할 수 있기 때문에 그래서 레이아웃 짤때는 아무의미가 없는 div 사용해야 된다는 것입니다.표 형식으로 된것은 당연히 table 사용해야 되는데 이때 div 쓰면 이 또한 바보 입니다.부트스트랩 테이블https://mdbootstrap.com/d…
  • profile_image 보통 찾으면 테이블 안에 있는 것을 어떻게 정렬 하는것에 대해서 나왔는데요.아래 부분은 그것이 아니라 테이블 자체를 왼쪽, 오른쪽 지정 하는것입니다. 부트스트랩은 기본적으로 가운데로 지정 되는것 같습니다.https://stackoverflow.com/questions/38160951/how-do-i-horizontally-center-a-table-in-bootstrap justify-content-startjustify-content-cent…