집 > 기사 > 백엔드 개발 > CSS만 사용하여 HTML 테이블을 카드 보기로 변환

CSS만 사용하여 HTML 테이블을 카드 보기로 변환

DDD원래의: 2024-10-26 00:18:28557검색

기존 행과 열을 뛰어넘어 평범한 구식 HTML 테이블을 동적 카드 보기로 변환하는 방법을 탐색하는 최근 실험을 공유하고 싶습니다.

간단한 HTML 테이블로 시작

다음과 같은 간단한 HTML 테이블부터 시작해 보겠습니다.

f5d188ed2c074f8b944552db028f98a1  
  ae20bdd317918ca68efdc799512a9b39  
    a34de1251f0d9fe1e645927f19a896e8  
      b4d429308760b6c2d20d6300079ed38eCompany01c3ce868d2b3d9bce8da5c1b7e41e5b  
      b4d429308760b6c2d20d6300079ed38eContact01c3ce868d2b3d9bce8da5c1b7e41e5b  
      b4d429308760b6c2d20d6300079ed38eCountry01c3ce868d2b3d9bce8da5c1b7e41e5b  
    fd273fcf5bcad3dfdad3c41bd81ad3e5  
  7943277d65306330563feb42dc8c705a  
  92cee25da80fac49f6fb6eec5fd2c22a  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds Futterkisteb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro Moctezumab90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5    
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro  b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  ca745a59da05f784b8811374296574e1  
f16b1740fad44fb09bfe928bcc527e08

브라우저에서 렌더링하면 이런 모습입니다.

Transform HTML Table into Card View Using Nothing But CSS

또 다른 HTML 테이블

화려한 것은 없습니다.

정의에 따르면 테이블은 행과 열로 구성됩니다. 기존의 행과 열 레이아웃을 어떻게 좀 더 동적인 것으로 변환할 수 있나요?

CSS 그리드의 힘을 발견하세요

테이블이 지루할 필요는 없습니다. 몇 가지 간단한 CSS 트릭을 사용하면 기존 HTML 표를 세련된 목록 또는 카드 보기로 쉽게 변환할 수 있습니다.

가장 좋은 점은 무엇인가요? JavaScript는 없고 순수 CSS만 있습니다!

CSS 그리드는 2007년부터 W3C 후보 권장 초안이었지만 현재 모든 주요 브라우저의 최신 버전에서 채택되었습니다.

CSS 그리드는 행과 열 모두에 맞게 설계되어 테이블과 같은 복잡한 레이아웃에 이상적입니다. 수평 및 수직 정렬을 동시에 관리할 수 있어 주로 1차원(행 또는 열)인 Flexbox보다 훨씬 더 많은 제어 기능을 제공합니다.

사용할 CSS 그리드 속성

및 에 CSS 그리드 레이아웃 사용*t* .
CSS 표시 속성을 사용하고 모든 을 블록 요소로 설정합니다.
CSS 그리드 속성을 사용하면 일반 HTML 테이블이 이미 마술처럼 반응형 목록 보기로 변환되어 각 레코드가 단일 열에 깔끔하게 표시됩니다.
```
table tbody, table thead {  
  display: grid;  
}  
table td {  
  display: block;  
}
```
멋져보이지만 조금은 혼란스럽네요! 목록의 각 행에 약간의 여유 공간을 제공하기 위해 일부 CSS 테두리를 뿌려 보겠습니다.
```
table, th, tr {  
  border: 1px solid black;  
}
```
됐어요. 새로운 모습을 확인해보세요! JavaScript 마법 한 줄도 없이 생성된 목록 보기에 비해 너무 초라하지 않습니다!

이제 구식 HTML 테이블로 멋진 목록을 만들었습니다. 이 멋진 목록을 멋진 카드 보기로 어떻게 바꾸나요?

스포일러 주의: CSS 몇 줄만 더 추가해 보세요!

목록을 카드 보기로 변환

테이블을 카드로 변환하는 마지막 카드 요령은 CSS 그리드 속성인 Grid-template-columns를 사용하는 것입니다.
```
table tbody {  
  display: grid;  
  grid-template-columns: repeat(4, 1fr);  
}
```
grid-template-columns는 CSS 그리드 레이아웃에서 그리드 열의 구조를 정의하는 데 사용되는 CSS 속성입니다. 열의 수와 너비, 그리드 내 공간을 나누는 방법을 지정합니다.

repeat() 함수를 사용하면 첫 번째 매개변수를 통해 원하는 열 수를 결정할 수 있습니다. 4라고 가정해 보겠습니다. 멋진 어림수를 좋아하지 않는 사람이 있을까요? 두 번째 매개변수는 해당 열의 크기(1fr 또는 사용 가능한 공간의 1분의 1)를 알려줍니다. 이는 마치 칼럼에 '모두가 똑같이 스페이스 파이를 나눠먹습니다!'라는 격려의 말을 전하는 것과 같습니다.

우리의 마지막 카드 보기

CodePen에서 잠시 시간을 내어 코드를 탐색하고 결과를 확인해 보세요. CSS 그리드 변환을 실험하고 놀기에 완벽한 장소입니다. 도중에 재미있는 놀라움을 발견할 수도 있습니다.

CSS Grid는 반응형이므로 개발자가 다양한 화면 크기와 기기에서 레이아웃을 조정하고 리플로우하는 방법을 효과적으로 제어할 수 있습니다.

선택사항: 카드 보기에 데이터 라벨 추가

카드 보기는 시각적으로 매력적이지만 열 정보의 명확성이 부족하여 사용자가 각 카드에 표시된 데이터를 추측하게 만듭니다.

JavaScript를 통합하면 각 열에 데이터 레이블을 원활하게 추가하여 레이블과 해당 셀 간의 연결을 강화할 수 있습니다.
```
f5d188ed2c074f8b944552db028f98a1  
  ae20bdd317918ca68efdc799512a9b39  
    a34de1251f0d9fe1e645927f19a896e8  
      b4d429308760b6c2d20d6300079ed38eCompany01c3ce868d2b3d9bce8da5c1b7e41e5b  
      b4d429308760b6c2d20d6300079ed38eContact01c3ce868d2b3d9bce8da5c1b7e41e5b  
      b4d429308760b6c2d20d6300079ed38eCountry01c3ce868d2b3d9bce8da5c1b7e41e5b  
    fd273fcf5bcad3dfdad3c41bd81ad3e5  
  7943277d65306330563feb42dc8c705a  
  92cee25da80fac49f6fb6eec5fd2c22a  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds Futterkisteb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro Moctezumab90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5    
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro  b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  ca745a59da05f784b8811374296574e1  
f16b1740fad44fb09bfe928bcc527e08
```
지금은 이렇습니다

데모

우리가 시작한 HTML 테이블과 전혀 다릅니다. CSS 그리드를 사용하면 2차원 공간에서 행과 열을 모두 완벽하게 제어할 수 있으므로 레이아웃 옵션이 무궁무진합니다.

결론

이 튜토리얼은 빙산의 표면에 불과합니다. 보다 반응성이 뛰어난 레이아웃을 쉽게 만들고, 요소를 겹치고, 여러 행이나 열에 걸쳐 항목을 확장하고, 그리드 영역을 동적으로 조정할 수 있으므로 다양한 레이아웃 요구 사항에 맞게 다용도로 사용할 수 있습니다.

즐거운 그리딩을 즐기세요!

저자 소개

저자는 인기 있는 PHP 데이터 그리드 도구(phpgrid.com)를 만든 베테랑 웹 개발자로서 CRUD의 강력한 기능을 활용하여 세상을 더 나은 곳으로 만들고 있습니다. 적어도 삶을 단순화하려는 개발자에게는 그렇습니다!

위 내용은 CSS만 사용하여 HTML 테이블을 카드 보기로 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php JavaScript css html define for while using Property number function this alert display transform column table

성명：

이전 기사：다음은 귀하의 기사를 기반으로 한 몇 가지 질문 기반 제목으로 \"왜 비어 있습니까\" 측면을 보여줍니다. * **SimpleXML 및 `print_r()`: XML 요소에 대해 빈 배열이 표시되는 이유는 무엇입니까?** * *다음 기사：다음은 귀하의 기사를 기반으로 한 몇 가지 질문 기반 제목으로 \"왜 비어 있습니까\" 측면을 보여줍니다. * **SimpleXML 및 `print_r()`: XML 요소에 대해 빈 배열이 표시되는 이유는 무엇입니까?** * *

CSS만 사용하여 HTML 테이블을 카드 보기로 변환

간단한 HTML 테이블로 시작

CSS 그리드의 힘을 발견하세요

사용할 CSS 그리드 속성

목록을 카드 보기로 변환

우리의 마지막 카드 보기

선택사항: 카드 보기에 데이터 라벨 추가

결론

저자 소개

관련 기사