การตั้งค่าความสูงของแถวตาราง

139

ฉันมีรหัสนี้:

<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

168

ลองสิ่งนี้:

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

— refaelos
แหล่งที่มา

166

ฉันไม่เข้าใจว่าเหตุใดจึงมีการโหวตจำนวนมากจึงไม่สามารถแก้ไขปัญหาได้ ใช้งานได้ก็ต่อเมื่อคุณมีข้อความเพียง 1 บรรทัดในไฟล์tr. โซลูชันนี้กำหนดความสูงของเส้นไม่ใช่trความสูง

— BenR

2

ตามที่กล่าวไว้ในความคิดเห็นในภายหลัง. ความสูงต้องมากกว่าความสูงของเนื้อหาที่ใหญ่ที่สุด มิฉะนั้นจะใช้ความสูงของเนื้อหาที่ใหญ่ที่สุดเป็นความสูงขั้นต่ำ และใช่สิ่งนี้ใช้ได้กับข้อความบรรทัดเดียวเท่านั้น

— Varun Chatterji

1

จะมีประโยชน์เฉพาะในกรณีของข้อความบรรทัดเดียว

— shekhardtu

23

ลองตั้งค่าแอตทริบิวต์td ดังนี้:

.topic td{ height: 14px };

— เดฟ
แหล่งที่มา

10

ไม่ได้ดูเหมือนการทำงาน (โครเมี่ยม 12 / Ubuntu 11.04)

— เดวิดกล่าวว่าคืนสถานะโมนิกา

1

อย่างจริงจัง? ฉันคิดว่าสิ่งนี้จะได้ผลเสมอ แน่นอนว่าตอนนี้ อย่างไรก็ตามนี่เป็นวิธีแก้ปัญหาที่ฉันพบว่าดีที่สุดเนื่องจากวิธีการทำงานของเซลล์ตารางคือการขยายไปยังเนื้อหา ดังนั้นheightในtdเป็นนาทีความสูงได้อย่างมีประสิทธิภาพซึ่งในกรณีนี้เป็นจริงสิ่งที่คุณต้องการ

— Simon_Weaver

@dave ในกรณีของฉันยังใช้@daveวิธีแก้ปัญหาเท่านั้น line-heightไม่ได้ทั้งที่มีหรือtr tdไม่แน่ใจว่ามันเกี่ยวข้องกับระยะเวลาหรือไม่เนื่องจากโพสต์ต้นฉบับมีอายุหกปีและกฎ html / css บางส่วนอาจมีการเปลี่ยนแปลงในขณะนี้เนื่องจากเบราว์เซอร์ส่วนใหญ่ใช้ HTML5

— น้ำ

นอกจากนี้จากประสบการณ์ของฉันถ้าคุณตั้งค่าความสูงที่ tr แล้วความสูง 100% หรือความสูงใด ๆ บน td ข้างในฉันเชื่อว่าระบบคิดว่าความสูงถูกตั้งค่าไว้ที่ td และไม่เป็นไปตามความสูงของ tr และแถวถูกตั้งค่าเป็นความสูงเริ่มต้น ดังนั้นแค่ตั้งค่าความสูงที่ td นี่คือเหตุผลที่ฉันโหวตคำตอบนี้

— user3245268

9

คุณสามารถลบระยะห่างพิเศษบางส่วนออกได้เช่นกันหากคุณวางborder-collapse: collapse;คำสั่ง CSS บนโต๊ะของคุณ

— fijter
แหล่งที่มา

6

ฉันพบคำตอบที่ดีที่สุดสำหรับวัตถุประสงค์ของฉันคือการใช้:

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

สิ่งwhite-space: nowrapนี้มีความสำคัญเนื่องจากป้องกันไม่ให้เซลล์ในแถวของคุณแตกในหลายบรรทัด

โดยส่วนตัวแล้วฉันชอบที่จะเพิ่มลงtext-overflow: ellipsisในองค์ประกอบthและของฉันtdเพื่อให้ข้อความที่ล้นออกมาดูดีขึ้นโดยการเพิ่มตัวอักษรเต็มสต็อปต่อท้ายเช่นToo long gets dots...

— ทอมดิกแมน
แหล่งที่มา

5

line-height <td>ทำงานเฉพาะเมื่อมันมีขนาดใหญ่แล้วความสูงปัจจุบันของเนื้อหาของ ดังนั้นหากคุณมีไอคอน 50x50 ในตารางtrความสูงของเส้นจะไม่ทำให้แถวเล็กกว่า 50px (+ padding)

เนื่องจากคุณได้ตั้งค่าช่องว่างภายในไว้แล้ว0จึงต้องเป็นอย่างอื่น
ตัวอย่างเช่นขนาดตัวอักษรขนาดใหญ่ภายในtdที่ใหญ่กว่า 14px ของคุณ

— อเล็กซ์
แหล่งที่มา

4

หากคุณใช้ Bootstrap ให้ดูที่s paddingของคุณtd

— 1 คน
แหล่งที่มา

3

สำหรับฉันฉันตัดสินใจที่จะใช้พาย ไม่ใช่สิ่งที่คุณต้องการ แต่อาจมีประโยชน์ในบางกรณี

table td {
    padding: 15px 0;
}

— ยูจีนโปโรดโก
แหล่งที่มา

1

เมื่อฉันต้องการแก้ไขความสูงของแถวที่มีค่าโดยเฉพาะโดยใช้ CSS แบบอินไลน์ดังต่อไปนี้ ..

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

— Md. Shafiqur Rahman
แหล่งที่มา