테이블 백그라운드를 넣으면 보더가 묻힙니다. 채택완료

테이블을 만들었는데

백그라운드를 넣으니 보더가 밑으로 묻힙니다.

다른 것들이랑 똑같이 보이게하는 방법이 있을까요

1025970347_1756788896.0798.png

 

Copy
<div class="table_wrap">
      <table>
        <colgroup>
          <col style="width:8.333%">
          <col style="width:58.333%">
          <col style="width:16.667%">
          <col style="width:16.667%">
        </colgroup>

        <tr>
          <th scope="col" colspan="4">특허리스트 [총 18건]</th>
        </tr>
        <tr>
          <th scope="col">구분</th>
          <th scope="col">명칭</th>
          <th scope="col">특허 등록</th>
          <th scope="col">특허 등록일</th>
        </tr>
        <tr>
          <td rowspan="11" class="absorption">성형 & 구조 특허</td>
          <td>연료전지용 카본 플레이트의 아크릴함침액과 그를 이용한 함침방법</td>
          <td>제 0476648 호</td>
          <td>2005.03.04</td>
        </tr>
        <tr>
          <td>연료전지용 음극판과 양극판의 접착하는 세퍼레이터 제조공정</td>
          <td>제 10-0719092 호</td>
          <td>2007.05.10</td>
        </tr>
        <tr>
          <td>연료전지용 커런트콜렉터와 그 제조방법</td>
          <td>제 10-0725231 호</td>
          <td>2007.05.29</td>
        </tr>
        <tr>
          <td>고분자 전해질 연료전지 스택의 좌측과 우측의 엔드플레이트와 그 제조방법</td>
          <td>제 10-0727430 호</td>
          <td>2007.06.05</td>
        </tr>
        <tr>
          <td>연료전지용 카본플레이트의 아크릴 함침방법</td>
          <td>제 10-0749031 호</td>
          <td>2007.08.07</td>
        </tr>
        <tr>
          <td>연료전지 분리판 제조용 금형구조</td>
          <td>제 10-1193131 호</td>
          <td>2012.10.15</td>
        </tr>
        <tr>
          <td>CAM 데이터 관리 시스템 및 방법</td>
          <td>제 10-1289296 호</td>
          <td>2013.07.18</td>
        </tr>
        <tr>
          <td>연료전지용 분리판 및 이를 포함하는 연료 전지</td>
          <td>제 10-1475920 호</td>
          <td>2014.12.17</td>
        </tr>
        <tr>
          <td>레독스 흐름 전지용 분리판 및 이를 포함하는 레독스 흐름 전지</td>
          <td>제 10-1884381 호</td>
          <td>2018.07.26</td>
        </tr>
        <tr>
          <td>연료전지용 분리판 유닛</td>
          <td>제 10-2112415 호</td>
          <td>2020.05.12</td>
        </tr>
        <tr>
          <td>인산염을 포함하여 연료전지 분리판 및 이를 포함하는 연료전지 스택</td>
          <td>제 10-2124055 호</td>
          <td>2020.06.11</td>
        </tr>

        <tr>
          <td rowspan="11" class="absorption">성형 & 구조 특허</td>
          <td>연료전지용 카본 플레이트의 아크릴함침액과 그를 이용한 함침방법</td>
          <td>제 0476648 호</td>
          <td>2005.03.04</td>
        </tr>
        <tr>
          <td>연료전지용 음극판과 양극판의 접착하는 세퍼레이터 제조공정</td>
          <td>제 10-0719092 호</td>
          <td>2007.05.10</td>
        </tr>
        <tr>
          <td>연료전지용 커런트콜렉터와 그 제조방법</td>
          <td>제 10-0725231 호</td>
          <td>2007.05.29</td>
        </tr>
        <tr>
          <td>고분자 전해질 연료전지 스택의 좌측과 우측의 엔드플레이트와 그 제조방법</td>
          <td>제 10-0727430 호</td>
          <td>2007.06.05</td>
        </tr>
        <tr>
          <td>연료전지용 카본플레이트의 아크릴 함침방법</td>
          <td>제 10-0749031 호</td>
          <td>2007.08.07</td>
        </tr>
      </table>
    </div>

 

Copy
.sub0103 .table_wrap table {width:100%; text-align: center; background:#fff;}
.sub0103 .table_wrap table tbody tr:first-child th {font-size: 18px; padding:12px 0; font-weight: 700; line-height: 145%; color:#fff; background:var(--main-color); border:1px solid #BDBDBD;}
.sub0103 .table_wrap table tbody tr:nth-child(2) th {border:1px solid #e7e7e7; font-size: 17px; font-weight: 700; padding:15px 0; background: #A6C4AB; color:#121212;}
.sub0103 .table_wrap table tbody tr .absorption {font-weight: 700; line-height: 145%; padding: 0 20px;}
.sub0103 .table_wrap table tbody tr td {font-size: 17px; padding: 12px 0; border:1px solid #E7E7E7;}
.sub0103 .table_wrap table tbody tr:nth-child(2n) td {background: #F5F9F7;}

답변 1개

채택된 답변
+20 포인트

제 피씨에선 문제 없어보인데요?

로그인 후 평가할 수 있습니다

답변에 대한 댓글 4개

누군가에게는 문제있이 보이니 해결방법이 필요합니다ㅠㅠ
border가 묻힌다는게 백그라운드가 상위로 올라가고 border가 내려가는 흔히 묻히는 현상이 나와야한데 개발자도구로 확인해도 묻힌 증상이 없어요 div로 뭔가 감싸던지 그런게 보여야한데
border: 2px solid #E7E7E7; 이렇게 보더 수치를 높여보세요
2로 하면 너무 굵어보여서.. 넵 감사합니다ㅠㅠ
컬러를 좀 더 어둡게 하니 보이네요

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고