열 데이터를 왜곡하지 않고 테이블 열 구분선을 추가 하시겠습니까?

Question

HTML 테이블 열 사이에 수직 구분선을 쉽게 만들 수 있습니까? 두꺼운 막대를 추가하고 싶지만이 작업을 수행하는 유일한 방법은 테이블 데이터를 왜곡하여 TD를 추가하는 것입니다.

jQuery + CSS 만 사용하여 테이블의 열 사이에 세로 구분선을 추가 할 수 있습니까?

내 테이블 구조는 매우 간단합니다.

<table> 
<thead><tr><th>...</tr></thead> 
<tbody><tr>...</tr>...</tbody> 
</table> 

Answer 1

는 당신을 위해 무엇을 검색하면 태그의 속성이며 규칙이라고합니다 : 당신은 CSS의 테두리 속성을 사용하여 스타일을 지정할 수 있습니다 http://www.htmlcodetutorial.com/tables/_TABLE_RULES.html

<table rules="cols"> 
    <thead><tr><th>...</tr></thead> 
    <tbody><tr>...</tr>...</tbody> 
</table> 

. 그러나 모든 셀에서 테두리를 사용하는 것의 이점은 테이블의 오른쪽 (또는 마지막 셀)에 테두리를 추가하지 않으므로 마지막 셀에 특별한 클래스를 추가 할 필요가 없다는 것입니다 국경을 덮어 씁니다.

편집 : 전체 테이블 주위에 테두리가 없거나 첫 번째/마지막 열의 왼쪽/오른쪽이 아닐 경우 태그에 특성 border = "0"을 추가하십시오.

예 : http://jsbin.com/ixire

Answer 2

일반적으로 각 셀의 오른쪽 또는 왼쪽에 테두리가 있습니다.

이 ->http://jsfiddle.net/XFtBR/은 출발점을 제공해야합니다. 셀 경계를 사용

Answer 3

은 당신이 사용할 수있는 하나 개의 옵션이지만 다른있다 :

나는 당신이 당신의 테이블 구조를 변경할 수 있는지 확실하지 않습니다하지만, 테이블에 대한 colgroup 및 COL 태그를 사용 할 수 있습니다. 나는 FF, 크롬과 오페라의 최신의 빠른 테스트를했고, 그것은 모두 일 :

<style type="text/css"> 
    table { 
     border:1px solid #ccc; 
     border-collapse:collapse; 
    } 

    .col { 
     border-right:10px solid blue; 
    } 

    </style> 

    <div id="tDiv"> 

    <table border="1"> 
    <colgroup class="col"> 
     <col width="200" /> 
    </colgroup> 
    <colgroup class="col"> 
     <col width="200" /> 
    </colgroup> 
    <thead> 
     <tr> 
      <th>one</th> 
      <th>two</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>one one</td> 
      <td>one two</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

그래도 IE에서 테스트에 대한 변경 (그것의 어떤 버전을)하지 않았다.