기본적으로 CSS는 테이블의 테두리를 지웁니다. 테이블의 내부 및 외부 테두리, 색상 및 크기를 제어하는 CSS 스타일을 공유해 보겠습니다. 배우고 싶은 친구들은 이를 참고할 수 있습니다.
기본적으로 CSS는 테이블의 테두리를 지웁니다. 보이는 효과는 다음과 같습니다.
테이블에 테두리를 추가하기 위해 CSS로 다음 문장을 작성했습니다.
.table{border:solid 1px #add9c0;}
야, 너무 순진한 것 같은데 브라우저에 보이는 효과는 이렇다.
알겠습니다. 저는 몇 년 동안 테이블을 만지지 않았지만 이것은 전혀 제 책임이 아닙니다. 테이블은 실제로 인기 디자이너에 의해 버려졌기 때문입니다. 그래서 CSS 스타일 문장을 삭제하고 다음과 같이 다시 작성했습니다.
.td{border:solid 1px #add9c0;}
하지만 문제는 여전히 발생했습니다. 고객처럼 얇은 요청을 하는 사람이 테이블의 두꺼운 내부 테두리를 어떻게 견딜 수 있습니까?
다른 방법이 없으므로 방금 작성한 CSS 코드를 삭제하고 직접 작성해야 합니다. 거만하다? 그냥 포기하라는 뜻 아닌가요?
테두리가 아주 얇은 표가 있어도 죄는 아니지만 텍스트 내용과 표 테두리가 너무 가까워서 틈이 없을 경우 모양새에 영향을 미치게 되므로 두 줄을 살짝 수정했습니다. 코드:.td{border:solid #add9c0; border-width:0px 1px 1px 0px;} .table{border:solid #add9c0; border-width:1px 0px 0px 1px;}두 당사자가 너무 친밀할 필요가 없다면 다음과 같이 작성하세요.
.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding-left:10px;} .table{border:solid #add9c0; border-width:1px 0px 0px 1px;}
자, 이제 최종 효과를 살펴보겠습니다. 이때 고객은 이미 매우 행복해하고 있습니다. 이것이 그가 원하는 효과입니다!
이상적인 효과가 있는 테이블이 방법을 다른 곳에서 사용하는 경우 CSS 코드의 표준화된 작성에 주의해야 합니다.추천 작성: border-width: 0px 1px 1px 0px;
추천 없음: border -width: 0 1 1 0;
마지막으로, Table 없이도 할 수 있다면 Talbe를 사용하지 마십시오. 그렇게 발전된 기술은 아니기 때문에 열심히 노력해야 한다는 점을 모두에게 상기시켜 드리고 싶습니다. p+CSS!
위 내용은 html5+CSS를 사용하여 표의 내부 및 외부 테두리, 색상 및 크기를 제어하는 방법에 대한 그래픽 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!