Đặt chiều cao hàng của bảng

135

Tôi có mã này:

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

Các hàng cách nhau quá xa. Tôi muốn các dòng gần nhau hơn.

Những gì tôi đã làm là thêm CSS sau đây nhưng dường như nó không thay đổi gì cả.

.topics tr { height: 14px; }

Tôi đang làm gì sai?

html css

— Hiromi Nagashim
nguồn

Liên quan: stackoverflow.com/questions/2092696/how-to-fix-height-of-tr

— Thilo

163

thử cái này:

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

— refaelos
nguồn

160

Tôi không hiểu tại sao điều này có nhiều phiếu bầu, nó không giải quyết được vấn đề. Nó chỉ hoạt động nếu bạn chỉ có 1 dòng văn bản trong tr. Giải pháp này đặt chiều cao của dòng , không phải trchiều cao.

— BenR

2

Như đã đề cập trong một bình luận sau đó. chiều cao phải lớn hơn chiều cao của nội dung lớn nhất của bạn. Nếu không, nó sẽ chỉ sử dụng chiều cao của nội dung lớn nhất làm chiều cao tối thiểu. Và vâng, điều này chỉ hoạt động cho một dòng văn bản.

— Varun Chatterji

1

Nó chỉ hữu ích trong trường hợp văn bản một dòng.

— shekhardtu

23

hãy thử thiết lập thuộc tính cho td như vậy:

.topic td{ height: 14px };

— đã
nguồn

10

Có vẻ như không hoạt động (Chromium 12 / Ubuntu 11.04) .

— David nói phục hồi Monica

1

nghiêm túc? Tôi nghĩ rằng điều này sẽ luôn luôn làm việc. nó chắc chắn làm bây giờ. dù sao đây là giải pháp tôi thấy là tốt nhất vì cách thức hoạt động của các ô trong bảng là mở rộng sang nội dung của chúng. Vì vậy, heighttrong một tdchiều cao có hiệu quả tối thiểu, trong trường hợp này thực sự là những gì bạn muốn

— Simon_Weaver

@dave Trong trường hợp của tôi, chỉ có @davegiải pháp duy nhất có hiệu quả. line-heightđã không làm việc với trhoặc td. Không chắc chắn liệu nó có liên quan gì đến thời gian hay không vì bài đăng gốc đã sáu năm tuổi và một số quy tắc html / css có thể đã thay đổi ngay bây giờ vì hầu hết các trình duyệt hiện đang sử dụng HTML5.

— nam

Ngoài ra, theo kinh nghiệm của tôi , nếu bạn đặt chiều cao trên tr và sau đó là 100% chiều cao hoặc bất kỳ chiều cao nào trên td bên trong nó, tôi tin rằng hệ thống nghĩ rằng chiều cao được đặt trên td và nó không theo chiều cao của tr và hàng được đặt thành chiều cao mặc định. Vì vậy, chỉ cần đặt chiều cao trên td. Đây là lý do tôi nâng cao câu trả lời này

— user3245268

9

Bạn cũng có thể xóa một số khoảng cách bổ sung nếu bạn đặt border-collapse: collapse;câu lệnh CSS trên bảng của mình.

— người đi đường
nguồn

6

Tôi tìm thấy câu trả lời tốt nhất cho mục đích của tôi là sử dụng:

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

Điều white-space: nowrapnày rất quan trọng vì nó ngăn các ô của hàng của bạn phá vỡ nhiều dòng.

Cá nhân tôi muốn thêm text-overflow: ellipsisvào các yếu tố của tôi thvà tdcác yếu tố để làm cho văn bản tràn đầy trông đẹp hơn bằng cách thêm các dấu gạch ngang, ví dụToo long gets dots...

— Tom Dickman
nguồn

5

chiều cao dòng chỉ hoạt động khi nó lớn hơn chiều cao hiện tại của nội dung <td>. Vì vậy, nếu bạn có biểu tượng 50x50 trong bảng, trchiều cao dòng sẽ không tạo một hàng nhỏ hơn 50px (+ phần đệm).

Vì bạn đã đặt phần đệm cho 0nó phải là một cái gì đó khác,
ví dụ kích thước phông chữ lớn bên trong tdlớn hơn 14px của bạn.

— Alex
nguồn

5

Nếu bạn đang sử dụng Bootstrap, hãy nhìn vào s paddingcủa bạn td.

— 1 người
nguồn

1

một khi tôi cần sửa chiều cao của một hàng có giá trị cụ thể bằng cách sử dụng CSS nội tuyến như sau ..

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

— Ông Shafiqur Rahman
nguồn

1

Đối với tôi, tôi quyết định sử dụng paddings. Nó không chính xác là những gì bạn cần, nhưng có thể hữu ích trong một số trường hợp.

table td {
    padding: 15px 0;
}

— Eugene porodko
nguồn