삼각형 주변에 테두리가 표시되지 않습니까?

삼각형 주변에 테두리가 표시되지 않습니까?

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/

이와 유사한 질문이 있습니다.테두리를 table tr로 설정하고 IE 6 & 7을 제외한 모든 것에서 작동하지만 IE를 제외한 모든 곳에서 작동하는 것 같습니다.

스타일시트에 추가:

table {
  border-collapse: collapse;
}

JS Fiddle.

이 방법으로 동작하는 이유는 실제로 사양에 상당히 잘 설명되어 있습니다.

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

... 그리고 나중에는collapse설정:

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

테이블 보더 붕괴 분리 모드에서 css 박스-섀도를 사용하여 보더를 에뮬레이션할 수 있습니다.

table tr {
  box-shadow: 0 0 4px #ccc;
}

언급URL : https://stackoverflow.com/questions/18679020/border-around-tr-element-doesnt-show