표 셀 테두리의 모서리에 왼쪽 / 오른쪽 테두리 대신 위쪽 / 아래쪽 테두리 색상을 지정하는 방법

debugcn 에 게시 Dev

kub1x

모서리의 인접한 두 측면이 서로 다른 색상을 가질 때 a div(또는 내 경우 th) 의 모서리 픽셀이 렌더링 되는 색상에 영향을 미치는 방법이 있습니까?

내가 무엇을 중요하게 표시하더라도 모서리는 항상 측면의 색을 얻는 것처럼 보입니다. 하지만 모서리 픽셀에 테두리 상단 색상을 사용하고 싶습니다.

다음 예제에서와 같이 첫 번째 행에 연속적인 검은 색 테두리를 지정하고 못생긴 빨간색으로 셀을 분리하고 나머지 테이블은 단순히 회색으로 만듭니다.

table {
  border-collapse: collapse;
  text-align: center;
}

table tr td {
  border: 8px solid grey;
}

table tr:first-child {
  border: 8px solid black;
}

table tr th:not(:last-child) {
  border-right: 8px solid red;
}

table tr:not(:first-child) td {
  border-top: 0;
}

I want:
<table>
  <tr>
    <th> black-bordered </th>
    <th> row </th>
    <th> separated </th>
    <th> with </th>
    <th> reds </th>
  </tr>
  <tr>
    <td> everything </td>
    <td> below </td>
    <td> it </td>
    <td> simply </td>
    <td> grey </td>
  </tr>
</table>

나는 또한을 제거하기 위해 노력했습니다 border-collapse의에 대한 경계주는 tr요소와에 대한 측면 경계 th들과 설정 border-spacing(난 그냥 발견하는) 제로. 그러나 tr테두리가 전혀 나타나지 않았고 나머지 테이블을 엉망으로 만들었습니다.

폴

당신은 pseudo element전체의 크기가 될 것 row + borders입니다. 그런 다음 위쪽 및 아래쪽 테두리 만 다시 적용합니다.

table {
  border-collapse: collapse;
  text-align: center;
}

table tr td {
  border: 8px solid grey;
  border-top: none;
}

table tr:first-child {
  border: 8px solid black;
}

table tr th:not(:last-child) {
  border-right: 8px solid red;
}

table tr th {
  position: relative;
}

table tr th::before {
  content: "";
  position: absolute;
  top: -8px; left: -8px;
  width: calc(100% + 16px); height: 100%;
  border-width: 8px 0;
  border-color: black transparent;
  border-style: solid;
}

I want:
<table>
  <tr>
    <th> black-bordered </th>
    <th> row </th>
    <th> separated </th>
    <th> with </th>
    <th> reds </th>
  </tr>
  <tr>
    <td> everything </td>
    <td> below </td>
    <td> it </td>
    <td> simply </td>
    <td> grey </td>
  </tr>
</table>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-17

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사