테이블 행 높이 설정

137

이 코드가 있습니다 :

<table class="topics" >
    <tr>
        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td>
        <td style="padding: 0 4px 0 0;">1.0</td>
        <td>abc</td>
    </tr>
    <tr>

        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td>
        <td style="padding: 0 4px 0 0;">1.3</td>
        <td>def</td>
    </tr>
</table>

행이 너무 멀리 떨어져 있습니다. 선을 더 가깝게 만들고 싶습니다.

내가 한 것은 다음 CSS를 추가하는 것이었지만 아무것도 변경하지 않는 것 같습니다.

.topics tr { height: 14px; }

내가 뭘 잘못하고 있죠?

html css

— 히로미 나 가사 힘
소스

관련 : stackoverflow.com/questions/2092696/how-to-fix-height-of-tr

— Thilo

166

이 시도:

.topics tr { line-height: 14px; }

— 레 파엘 로스
소스

160

나는 이것이 왜 그렇게 많은 표를 가지고 있는지 이해하지 못하지만 문제를 해결하지 못합니다. 에 한 줄의 텍스트 만있는 경우에만 작동합니다 tr. 이 솔루션은 높이가 아닌 선 높이를 설정합니다 tr.

— BenR

2

나중에 주석에서 언급했듯이. 높이는 가장 큰 콘텐츠의 높이보다 커야합니다. 그렇지 않으면 가장 큰 내용의 높이를 최소 높이로 사용합니다. 그리고 네, 이것은 한 줄의 텍스트에서만 작동합니다.

— Varun Chatterji 2016 년

1

한 줄 텍스트의 경우에만 유용합니다.

— shekhardtu

23

속성을 설정하십시오 td .

.topic td{ height: 14px };

— 데이브
소스

10

작동 하지 않는 것 같습니다 (Chromium 12 / Ubuntu 11.04) .

— 데이비드는 모니카

1

진심으로? 나는 이것이 항상 효과가 있다고 생각했다. 확실히 지금 그렇습니다. 어쨌든 이것은 테이블 셀이 작동하는 방식이 내용으로 확장되는 것이기 때문에 내가 찾은 최고의 솔루션입니다. 그래서 heightA는에 td효과적으로 높이를 min으로이 경우에 이는 당신이 원하는 것을 실제로

— Simon_Weaver

@ dave 내 경우에도 @dave솔루션 만 작동했습니다. 또는로 line-height작동하지 않았습니다 . 원래 게시물이 6 살이고 대부분의 브라우저가 HTML5를 사용하고 있기 때문에 html / css 규칙 중 일부가 변경되었을 수 있으므로 타이밍과 관련이 있는지 확실하지 않습니다. trtd

— nam

또한 내 경험에 따르면 tr에 높이를 설정 한 다음 100 % 높이 또는 td 내부의 높이를 설정하면 높이가 td에 설정되어 있다고 생각하고 높이를 따르지 않습니다. tr과 행은 기본 높이로 설정됩니다. td에 높이를 설정하십시오. 이것이

— 제가이

9

border-collapse: collapse;테이블에 CSS 문을 배치하면 여분의 간격도 제거 할 수 있습니다 .

— 파이터
소스

6

내 목적에 가장 적합한 대답은 다음을 사용하는 것입니다.

.topics tr { 
    overflow: hidden;
    height: 14px;
    white-space: nowrap;
}

는 white-space: nowrap이 여러 줄에 걸쳐 깨는에서 행의 세포를 방지 중요합니다.

나는 개인적 text-overflow: ellipsis으로 내 th및 td요소에 추가하여 후행 풀 스톱을 추가하여 넘친 텍스트를 더 멋지게 보이게합니다.Too long gets dots...

— 톰 딕맨
소스

5

줄 높이는의 현재 높이보다 클 때만 작동합니다 <td>. 따라서 표에 50x50 아이콘이 있으면 tr행 높이가 행을 50px (+ 패딩)보다 작게 만들지 않습니다.

이미 패딩을 설정 했으므로 예를 들어 14px보다 큰 내부의 큰 글꼴 크기와 같은 0다른 항목 이어야합니다.
td

— 알렉스
소스

5

당신이 부트 스트랩을 사용하는 경우,보고 padding당신의 td의.

— 1 인
소스

1

일단 다음과 같이 인라인 CSS를 사용하여 특정 값이 지정된 행의 높이를 수정해야합니다.

<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>

— Shafiqur 라만
소스

1

나는 패딩을 사용하기로 결정했습니다. 정확히 필요한 것은 아니지만 경우에 따라 유용 할 수 있습니다.

table td {
    padding: 15px 0;
}

— 유진 포로드 코
소스