[html] tr 요소 주변의 테두리가 표시되지 않습니까?

Program / 글쓴이

Chrome / Firefox가에서 테두리를 렌더링하지 않는 것처럼 보이지만 tr선택기가 인 경우 테두리를 렌더링합니다 table tr td.

tr에 테두리를 어떻게 설정할 수 있습니까?

작동하지 않는 내 시도 :

table tr {
  border: 1px solid black;
}
<table>
  <tbody>
    <tr>
      <td>
        Text
      </td>
    </tr>
  </tbody>
</table>

스 니펫 확장

http://jsfiddle.net/edi9999/VzPN2/

이것은 비슷한 질문입니다 : 테두리를 테이블 tr로 설정하고 IE 6 & 7을 제외한 모든 곳에서 작동하지만 IE를 제외한 모든 곳에서 작동하는 것 같습니다.

답변

다음을 스타일 시트에 추가하십시오.

table {
  border-collapse: collapse;
}

JSFiddle .

이런 식으로 작동하는 이유는 실제로 사양에 잘 설명 되어 있습니다 .

CSS의 표 셀에 테두리를 설정하는 두 가지 모델이 있습니다. 하나는 개별 셀 주변의 분리 된 테두리에 가장 적합하고 다른 하나는 테이블의 한쪽 끝에서 다른 쪽 끝까지 연속되는 테두리에 적합합니다.

… 이상 collapse설정 :

축소 테두리 모델에서는 셀, 행, 행 그룹, 열 및 열 그룹의 전체 또는 일부를 둘러싸는 테두리를 지정할 수 있습니다.

답변