테이블 행 높이 설정

테이블 행 높이 설정

---

이 코드가 있습니다 :

<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; }

내가 뭘 잘못하고 있죠?

---

이 시도:

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

---

속성을 설정하십시오 td.

.topic td{ height: 14px };

---

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

---

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

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

---

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

---

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

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

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

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

---

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

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

참고 URL : https://stackoverflow.com/questions/6398172/setting-table-row-height