[CSS] 테이블 여백 없애기

G E Lee·2022년 11월 17일
0

css

목록 보기
2/2
post-thumbnail


테이블을 만들다보면 기본으로 적용되는 여백값으로 인해 테이블 사이에 여백이 임의로 생성된다. 커스텀 UI를 만들기 위해 이 여백을 없애주자.

	// styled components Table, Td {border 1px solid black} 적용
	<Table>
          <Thead>
            <Tr>
              <Td>Table title</Td>
            </Tr>
          </Thead>
          <Tbody>
            <Tr>
              <Td>section 1</Td>
              <Td>section 2</Td>
            </Tr>
          </Tbody>
    </Table>

border 준 곳에 border-spacing: 0px; 를 추가해주면 끝!
padding, margin 리셋하여 UI를 커스텀하는 곳에도 유용하게 사용 할 수 있을 것 같다.

까먹어서 자꾸 구글링하는 바보같은 나를 위해 기록해둔다...

profile
배움은 끝이 없다

0개의 댓글