테이블 내부에만 테두리를 추가하는 방법을 알아 내려고합니다. 내가 할 때 :
table {
border: 0;
}
table td, table th {
border: 1px solid black;
}경계는 전체 테이블 주위와 테이블 셀 사이에 있습니다. 내가 달성하고자하는 것은 테이블 셀 주위에 테이블 내부에만 테두리를 두는 것입니다 (테이블 주위에 외부 테두리 없음).
다음은 테이블에 사용하는 마크 업입니다 (중요하지 않다고 생각하더라도).
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell (1,1)</td>
<td>Cell (1,2)</td>
</tr>
<tr>
<td>Cell (2,1)</td>
<td>Cell (2,2)</td>
</tr>
<tr>
<td>Cell (3,1)</td>
<td>Cell (3,2)</td>
</tr>
</table>다음은 대부분의 테이블에 적용되는 몇 가지 기본 스타일입니다.
table {
border-collapse: collapse;
border-spacing: 0;
}답변
내가 생각하는 것을하고 있다면 다음과 같은 것이 필요합니다.
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid black;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}문제는 모든 셀 주위에 ‘전체 테두리’를 설정하여 전체 테이블 주위에 테두리가있는 것처럼 보입니다.
건배.
편집 : 그 의사 클래스에 대한 약간의 정보는 quirksmode 에서 찾을 수 있으며 , 예상대로 IE 지원 측면에서 거의 SOL입니다.
답변
이것은 나를 위해 작동합니다 :
table {
border-collapse: collapse;
border-style: hidden;
}
table td, table th {
border: 1px solid black;
}FF 3.6 및 Chromium 5.0에서 테스트 한 IE는 지원이 없습니다. 에서 W3C :
‘테두리 스타일’이 ‘숨겨 짐’인 테두리는 다른 모든 충돌 테두리보다 우선합니다. 이 값을 가진 테두리는이 위치의 모든 테두리를 억제합니다.
답변
원하는 효과를 얻을 수 있는 매우 간단한 방법의 예 :
<table border="1" frame="void" rules="all">
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
</tr>
<tr>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
</table>답변
ie7, ie8과의 호환성으로 인해 마지막 자식이 아닌 첫 번째 자식을 사용하는 것이 좋습니다.
table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}
table tr td:first-child{border-left:0;}
table tr:first-child td{border-top:0;}CSS 2.1 의사 클래스에 대한 자세한 내용은
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx를 참조하십시오.
답변
일반적인 테이블 마크 업의 경우 IE 7 이하를 제외한 BrowserStack의 모든 장치 / 브라우저에서 작동하는 간단한 솔루션이 있습니다.
table { border-collapse: collapse; }
td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }IE 7 지원을 위해 다음을 추가하십시오.
tr + tr > td,
tr + tr > th { border-top: 1px solid; }테스트 사례는 여기에서 볼 수 있습니다 : http://codepen.io/dalgard/pen/wmcdE
답변
이것은 작동해야합니다 :
table {
border:0;
}
table td, table th {
border: 1px solid black;
border-collapse: collapse;
}편집하다:
방금 시도했지만 테이블 테두리는 없습니다. 그러나 테이블 테두리를 설정하면 border-collapse에 의해 제거됩니다.
이것은 테스트 파일입니다.
<html>
<head>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0;
}
table {
border: 0;
}
table td, table th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell (1,1)</td>
<td>Cell (1,2)</td>
</tr>
<tr>
<td>Cell (2,1)</td>
<td>Cell (2,2)</td>
</tr>
<tr>
<td>Cell (3,1)</td>
<td>Cell (3,2)</td>
</tr>
</table>
</body>
</html>