일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 페이페이
- terraform
- 카마츠루
- react.js
- PayPay
- typescript
- local
- Python
- 뮌헨
- 메르페이
- Selenium
- 프라하
- PostgreSQL
- 방콕
- vba
- 체코
- codebuild
- JenkinsFile
- duckdb
- 三井住友カード
- pyenv
- 釜つる
- javascript
- 미츠이 스미토모
- 아타미
- CSV
- documentdb
- node.js
- 태국
- 熱海
- Today
- Total
목록Table (2)
도쿄사는 외노자
일단 이번에 사용하게 된 녀석 소개. Ant Design Components Overview - Ant Design antd provides plenty of UI components to enrich your web applications, and we will improve components experience consistently. We also recommend some great Third-Party Libraries additionally. ant.design 이번엔 테이블 구현을 위해 사용하였다. MaterialUI와도 별 위화감 없이 섞어쓸 수 있고, 데이터테이블 기능이 어느정도 다 구현되어 있어서 좋더라. 일단 기본적인 로딩 기능 구현은 아래를 참조하면 된다. https://ant.d..

좌측 복수 열을 고정시킨 테이블을 작성. 열 고정에는 sticky를 사용. TD에 사용한 CSS는 다음과 같다. border는 class로 부여, position을 sticky로 하고, 고정하고 싶은 left를 설정. 위와 같은 방법으로 1~3열을 고정으로 지정하였다. 2번째 열부터는 앞의 열의 width를 left로 설정해야 한다 (width설정 및 const화 필수) 위와 같이 설정한 경우 sticky를 설정한 셀의 border가 투명해져버려, 스크롤 이동 시 다른 셀의 내용 및 border가 비쳐 보이게 된다. 대략 이런 식으로... 분명 흰색으로 border를 설정해 놓았건만 위와 같은 식이다. 이를 해결한 방법은 다음과 같다. Table에 borderCollapse를 separate로 지정하고,..