20 행 10 열의 테이블을 만들었습니다. 두 개의 열을 구분하는 눈금 선을 만들고 싶습니다.CSS 교대조가 교대로 사용되는 경우
따라서 2 열과 3 열 사이에는 구분선이 있습니다. 이 또한 열 4, 5, 열 6, 7,과 열 8, 9
을 분리 줄 수 있어야하지만 등
열 1, 2, 컬럼 3과 4를 분리하는 라인을 가지고 싶지 않아CSS로이 작업을 수행 할 수있는 방법이 있습니까? 나는 각 열의 개별 셀에 왼쪽 테두리를 만들려고했으나 열을 내려가는 실선을주지는 않습니다.
도움을 주시면 감사하겠습니다.
실선 문제는 테이블의 '테두리 붕괴'속성이라고 생각합니다. 'border-collapse : collapse'를 설정하지 않으면 표 셀 사이에 공백이 생깁니다.
이<html>
<head>
<style type="text/css">
table {
border-collapse:collapse;
border:1px solid black;
}
td {
padding:2px 8px;
}
.border {
border-right:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>asdf</td><td class="border">asdf</td>
<td>asdf</td><td class="border">asdf</td>
<td>asdf</td><td class="border">asdf</td>
<td>asdf</td><td class="border">asdf</td>
<td>asdf</td><td class="border">asdf</td>
</tr>
<tr>
<td>asdf</td><td class="border">asdf</td>
<td>asdf</td><td class="border">asdf</td>
<td>asdf</td><td class="border">asdf</td>
<td>asdf</td><td class="border">asdf</td>
<td>asdf</td><td class="border">asdf</td>
</tr>
</body>
<html>
당신은 다른 모든 선택됩니다 어떤
td:nth-child(2n){
border-right: 1px solid #000
}
을 사용할 수 있습니다 여기에
는 열 2, 3, 4, 5 등 사이의 테두리 테이블의 예입니다 td를 추가하고 테두리를 추가하십시오.불필요한 마크 업이 필요 없기 때문에 가장 깨끗한 방법입니다. 하지만 모든 브라우저는 그것을 처리 할 :(
를 CSS 사용하면 같은 효과를 얻을 수 있습니다,이 http://www.w3.org/Style/Examples/007/evenodd
을 수 링크의 해당 텍스트를 답에 추가 하시겠습니까? – freemanoid
당신이 어떤 소스도의 HTML/CSS가 있는가 확인 우리가 당신을 도울에서 봐 가지고 coudl? – Kyle