회색 세로 테두리 및 검은 색 가로 테두리 (합계)와 같은 표 스프레드 시트의 스타일을 지정하고 싶습니다.
나는 이것으로 크롬에서 원하는 것을 얻습니다 : https://jsfiddle.net/m9abo8f6/4/
HTML
<table>
<tr><td>row1</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>row2</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>row3</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Total</td><td>3</td><td>6</td><td>9</td></tr>
</table>
CSS
body {
background-color:white;
}
table {
border-collapse: collapse;
border-spacing: 0px;
}
tr:last-child {
border-top: 1px double black;
}
td {
border-right: 1px solid #d0d0d0;
}
그러나 IE (11)는 가로 위에 세로 테두리를 렌더링하고 IE에서는 가로 테두리가 검은 색이 아니기 때문에 더 많은 작업이 진행되고 있습니다.
div / 기타 요소 오버레이, 합리적으로 크로스 브라우저와 같은 트릭없이 CSS에서 원하는 (위의 크롬 렌더링)을 얻을 수있는 방법이 있습니까?
body {
background-color:white;
}
table {
border-collapse: collapse;
border-spacing: 0px;
position: relative;
overflow: hidden;
}
tr:last-child td:before {
position: absolute;
background: #000;
margin-top: -2px;
height: 1px;
content: '';
right: 0;
left: 0;
}
td {
border-right: 1px solid #d0d0d0;
}<table>
<tr><td>row1</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>row2</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>row3</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Total</td><td>3</td><td>6</td><td>9</td></tr>
</table>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다