CSS로 테이블 셀에 여백을 만드는 방법
소개
bootstrap에서 구현하고 있던 Table Cell에 여백을 만들 때 조금 빠졌기 때문에 메모입니다.
 HTML 및 CSS
 bootstrap Examples에서
 HTML
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
 CSS
th,
td {
    border-right: 1px solid #104A9E !important;
    color: #104A9E;
}
 
 변경점(CSS)
CSS에서 배경색과 같은 border를 추가하여 여백이있는 것처럼 보이도록 변경.
th,
td {
    border-right: 1px solid #104A9E !important;
    color: #104A9E;
}
/* 追加 */
tr {
    border-bottom: 10px solid #e9f1f9;
}
 
                
                    
        
    
    
    
    
    
                
                
                
                
                    
                        
                            
                            
                            Reference
                            
                            이 문제에 관하여(CSS로 테이블 셀에 여백을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
                                
                                https://qiita.com/the1031hiroto/items/8f4c2f0b5e022fb55f63
                            
                            
                            
                                텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
                            
                            
                                
                                
                                
                                
                                
                                우수한 개발자 콘텐츠 발견에 전념
                                (Collection and Share based on the CC Protocol.)
                            
                            
                        
                    
                
                
                
            
bootstrap Examples에서
HTML
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
CSS
th,
td {
    border-right: 1px solid #104A9E !important;
    color: #104A9E;
}

변경점(CSS)
CSS에서 배경색과 같은 border를 추가하여 여백이있는 것처럼 보이도록 변경.
th,
td {
    border-right: 1px solid #104A9E !important;
    color: #104A9E;
}
/* 追加 */
tr {
    border-bottom: 10px solid #e9f1f9;
}
 
                
                    
        
    
    
    
    
    
                
                
                
                
                    
                        
                            
                            
                            Reference
                            
                            이 문제에 관하여(CSS로 테이블 셀에 여백을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
                                
                                https://qiita.com/the1031hiroto/items/8f4c2f0b5e022fb55f63
                            
                            
                            
                                텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
                            
                            
                                
                                
                                
                                
                                
                                우수한 개발자 콘텐츠 발견에 전념
                                (Collection and Share based on the CC Protocol.)
                            
                            
                        
                    
                
                
                
            
th,
td {
    border-right: 1px solid #104A9E !important;
    color: #104A9E;
}
/* 追加 */
tr {
    border-bottom: 10px solid #e9f1f9;
}
Reference
이 문제에 관하여(CSS로 테이블 셀에 여백을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/the1031hiroto/items/8f4c2f0b5e022fb55f63텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
                                
                                
                                
                                
                                
                                우수한 개발자 콘텐츠 발견에 전념
                                (Collection and Share based on the CC Protocol.)