CSS : 표 열 사이의 테두리 만

CSS : 표 열 사이의 테두리 만

---

CSS를 사용하여 열 사이의 테이블에 테두리를 표시하는 방법이 있습니까 (외부 가장자리가 아님)?

---

편집 2

Erasmus는 아래에 더 나은 한 줄짜리가 있습니다.

---

까다로운 CSS 선택기와 추가 마크 업 등이 없으면 안됩니다.

다음과 같이 할 수 있습니다 (CSS 선택기 사용).

table {
    border:none;
    border-collapse: collapse;
}

table td {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

table td:first-child {
    border-left: none;
}

table td:last-child {
    border-right: none;
}

편집하다

@jeroen의 코멘트 타격을 명확히하기 위해 정말로 필요한 것은 다음과 같습니다.

table { border: none; border-collapse: collapse; }
table td { border-left: 1px solid #000; }
table td:first-child { border-left: none; }

---

나는 이것이 오래된 질문이라는 것을 알고 있지만 Chrome, Firefox 등은 물론 IE8 이상에서도 일관되게 작동 하는 간단한 한 줄 솔루션 이 있습니다 (대부분 IE7에서도 작동합니다 -http를 참조 하십시오. //www.quirksmode.org/css/selectors/ ) :

table td + td { border-left:2px solid red; }

출력은 다음과 같습니다.

Col1 | Col2 | Col3

이 작업을 수행하는 것은 다른 테이블 셀에 인접한 테이블 셀에만 테두리를 정의한다는 것입니다. 즉, CSS를 첫 번째 셀을 제외하고 행의 모든 ​​셀에 적용하는 것입니다.

두 번째부터 마지막 ​​자식까지 왼쪽 테두리를 적용하여 셀 "사이"에있는 선 모양을 제공합니다.

---

테이블의 테두리는 항상 약간 벗겨집니다. 한 가지 가능성은 가장 오른쪽 열에있는 것을 제외하고 각 테이블 셀에 오른쪽 테두리 선언을 추가하는 것입니다. 어떤 종류의 테이블 간격을 사용하는 경우 이것은 잘 작동하지 않습니다.

또 다른 옵션은 테두리가있는 1px 높이의 배경 이미지를 사용하는 것이지만, 항상 각 셀의 너비를 보장 할 수있는 경우에만 작동합니다.

또 다른 가능성은 colgroup / col으로 실험하는 것입니다. 이것은 내가 그것을 마지막으로 보았을 때 상당히 끔찍한 지원 크로스 브라우저를 가지고 있었지만 그 이후로 개선 될 수있었습니다 : http://www.webmasterworld.com/forum83/6826.htm

---

문제를 단순화 할 수 있지만 td {border-right : 1px solid red;}가 테이블 설정에서 작동합니까?

---

border-righttd에 a를 설정 한 다음 행의 마지막 td를 대상으로 테두리를로 설정해야합니다 none. 타겟팅 방법 :

1. td각 행 의 마지막 에 클래스를 설정 하고 사용
2. 설정된 수의 셀이고 최신 브라우저 만 대상으로하는 경우 3 개의 셀 너비를 사용할 수 있습니다. td + td + td
3. 또는 그 이상 (새 브라우저 사용) td:last-child

---

세로 테두리로 구분 된 세 개의 열에 대한 스타일 시트에서 이것을 사용했으며 제대로 작동했습니다.

#column-left {
     border-left: 1px solid #dddddd;
}
#column-center {
     /*no border needed/*
}
#column-right {
     border-right: 1px solid #dddddd;
}

The column on the left gets a border on the right, the column on the right gets a border on the left and the the middle column is already taken care of by the left and right.

If your columns are inside a div/wrapper/table/etc... don't forget to add extra space to accomodate the width of the borders.

---

Inside <td>, use style="border-left:1px solid #colour;"

---

See table's rules attribute - https://www.w3.org/TR/html401/struct/tables.html#h-11.3.1

---

There's no easy way of doing this, other than doing something like class="lastCell" on the last td in each tr, and then setting your css up like this:

#table td {
    border-right: 5px solid red
}

.lastCell {
    border-right: none;
}

참고URL : https://stackoverflow.com/questions/3313456/css-borders-between-table-columns-only