찾다
웹 프론트엔드CSS 튜토리얼``와 CSS만 사용하여 테이블을 만들 수 있나요?

Can I Create a Table Using Only `` and CSS?

만을 사용하여 테이블을 만드는 방법 태그 및 CSS

HTML의

요소와 CSS를 사용하면 브라우저 간 호환되는 기능 테이블을 만들 수 있습니다.

제공된 HTML 스니펫에서는 다양한 클래스를 사용하여 요소의 스타일을 지정합니다. 크로스 브라우저 경험을 위해 다음과 같이 CSS를 조정할 수 있습니다.

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

조정된 CSS에서:

  • 다음에 대해 .divTable을 .div-table로 대체했습니다. 일관성.
  • 브라우저 간 호환성을 위해 border-collapse:separate;를 제거했습니다. .divTable에서.

이 업데이트된 CSS를 사용하면 IE7 이하를 포함한 모든 주요 브라우저에서 표가 올바르게 표시됩니다.

위 내용은 ``와 CSS만 사용하여 테이블을 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
PSA : 행동 강령 템플릿에 링크하는 것은 행동 강령이있는 것과 다릅니다.PSA : 행동 강령 템플릿에 링크하는 것은 행동 강령이있는 것과 다릅니다.Apr 19, 2025 am 09:35 AM

프론트 엔드 웹 디자인 및 개발과 관련된 모든 회의를 나열하는 사이트가 있다는 것을 알고 있습니까? 우리는! 당신이 하나로 가려고한다면, 확인하십시오

열두 번째 네 번째열두 번째 네 번째Apr 19, 2025 am 09:30 AM

CSS- 트릭은 12 살입니다! 초기 청소년기 단계에 확고하게 말하면, 우리가 매년하는 것처럼 지난해에 반영하자. 나는 더 낫다

웹에 필요한 것이 무엇인지 (그리고 유물이 어떻게 여기에 있는지)웹에 필요한 것이 무엇인지 (그리고 유물이 어떻게 여기에 있는지)Apr 19, 2025 am 09:28 AM

나는 최근에 다가오는 아티팩트 컨퍼런스에 대해 이야기하기 위해 상점 토크쇼에서 Dave Rupert, Chris Coyier 및 Chris Ferdinandi에 합류하게 된 것을 즐겼습니다.

사용자 정의 속성으로 여러 배경을 관리합니다사용자 정의 속성으로 여러 배경을 관리합니다Apr 19, 2025 am 09:21 AM

CSS 사용자 정의 속성에 대한 멋진 점은 값의 일부가 될 수 있다는 것입니다. 여러 배경을 사용하여 디자인을 끌어 내기 위해 여러분에게#039; 각

약속에 오는 새로운 방법을 엿볼 수 있습니다약속에 오는 새로운 방법을 엿볼 수 있습니다Apr 19, 2025 am 09:14 AM

약속은 JavaScript에 소개 된 가장 유명한 기능 중 하나입니다. 언어로 바로 구워진 고유 한 비동기 아티팩트가

@keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?@keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?Apr 18, 2025 am 11:34 AM

나는 다른 날이 질문을 받았다. 나의 첫 번째 생각은 : 이상한 질문입니다! 특이성은 선택기에 관한 것이며 At-Rules는 선택기가 아니므로 ... 무의미합니까?

@Media 및 @Support 쿼리를 중첩 할 수 있습니까?@Media 및 @Support 쿼리를 중첩 할 수 있습니까?Apr 18, 2025 am 11:32 AM

그렇습니다. 당신은 할 수 있습니다. 그리고 그것은 실제로 어떤 순서로 중요하지 않습니다. CSS 전 처리기가 필요하지 않습니다. 일반 CSS에서 작동합니다.

빠른 Gulp 캐시 파열빠른 Gulp 캐시 파열Apr 18, 2025 am 11:23 AM

CSS 및 JavaScript (및 이미지 및 글꼴 등)와 같은 자산에 멀리 떨어진 캐시 헤더를 설정해야합니다. 브라우저를 알려줍니다

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기