머티리얼 UI에서 테이블 헤더 셀 사이의 수직 간격을 피하는 방법은 무엇입니까?

Question

MUI 테이블의 헤더 셀 사이에 수직 간격이 존재합니다. 어떻게 제거하나요?

다음은 코드샌드박스의 오류를 재현한 것입니다. https://codesandbox.io/s/mui-material-table-sticky-header-forked-euilo3?file=/tsconfig.json

스타일을 적용해 보았습니다.

경계: "없음",
    borderCollapse: "접기",
    여백: 0,

이 오류는 특정 해상도에서 표를 스크롤할 때만 발생합니다.

Answer 1

요소를 검사할 때 th 和 td 元素上看到 padding: 6px 16px;할 수 있습니다. 따라서 추가 간격은 헤더 셀과 행 셀 모두에 적용되므로 실제로 정확합니다

padding:0 또는 임의의 값을 설정하여 헤더 셀 간격을 변경할 수 있습니다.

으아악

그러나 정렬을 유지하려면 행 셀에도 동일한 작업을 수행해야 합니다.