ฉันสามารถใช้ความสูงต่ำสุดสำหรับตาราง tr หรือ td ได้หรือไม่

120

ฉันกำลังพยายามแสดงรายละเอียดของการรับในตาราง

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

ฉันได้ลองกับ css นี้:

table,td,tr{
  min-height:300px;
}

แต่มันไม่ทำงาน

ขอบคุณล่วงหน้า.

html css

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

1

จะมีประโยชน์ถ้าคุณสร้างซอให้เราลองใช้รหัสของคุณ

— mavrosxristoforos

39

ไม่ใช่วิธีแก้ปัญหาที่ดี แต่ลองทำดังนี้

<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>

และตั้งค่า divs เป็น min-height:

div {
    min-height: 300px;
}

หวังว่านี่คือสิ่งที่คุณต้องการ ...

— อาร์โนลด์แซค
แหล่งที่มา

2

@SackySan คุณต้องให้คลาส divs แล้วทำให้กฎนี้ใช้กับคลาสนั้นเท่านั้น

— Zachary Weixelbaum

มันไม่ดีเลย!

— Ahmad

408

heightสำหรับtdผลงานเช่นmin-height:

td {
  height: 100px;
}

แทน

td {
  min-height: 100px;
}

เซลล์ตารางจะเติบโตเมื่อเนื้อหาไม่พอดี

https://jsfiddle.net/qz70zps4/

— Aureliano Far Suau
แหล่งที่มา

2

ใน Google Chrome ของฉัน (เวอร์ชัน 47.0.2526.106 ม.) ที่ทำงานบน Windows 7 ฉันพบว่าการตั้งค่าheightของtdจริงถูกประมวลผลเป็นpaddingด้านบนและด้านล่างซึ่งอาจทำให้เกิดปัญหาการจัดวางบางอย่างเนื่องจากคุณคิดว่าเป็นheightช่องว่างจริงๆ มันไม่ได้แสดงเป็นสไตล์หรือเป็นสไตล์ที่คำนวณในเครื่องมือ dev แต่เมื่อคุณวางเมาส์เหนือองค์ประกอบ html ที่ตรวจสอบแล้วจะแสดงบนหน้าจอ

— Felypp Oliveira

แต่คำถามเกี่ยวกับความสูงขั้นต่ำที่ไม่ได้ผล! จะเกิดอะไรขึ้นถ้าคุณมีข้อความยาวและต้องการอีกบรรทัดที่มีความสูงมันจะยุ่ง

— CMS

เช่น @CMS กล่าวว่าเขาถามเกี่ยวกับการmin-heightไม่ได้heightแต่เป็น @frank table tdอธิบายดังต่อไปนี้มันจะทำงานเหมือนกันสำหรับ บางทีนี่อาจต้องการคำอธิบายที่ดีกว่านี้

— dft

3

นี่เป็นคำตอบที่ดีกว่าคำตอบที่ได้รับการยอมรับอย่างแน่นอน

— Jinjubei

2

คำตอบนี้ช่วยให้ฉันสามารถทำงานได้หลายชั่วโมงควรเป็นคำตอบ

— Luke Pring

28

การแก้ปัญหาโดยไม่ต้องdivถูกนำมาใช้เป็นองค์ประกอบหลอกเหมือน::afterเข้าไปครั้งแรกในแถวด้วยtd min-heightบันทึก HTML ของคุณให้สะอาด

table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}

— Alex Omelnitckii
แหล่งที่มา

13

ใน CSS 2.1 ไม่ได้กำหนดเอฟเฟกต์ของ 'min-height' และ 'max-height' บนตาราง, ตารางแบบอินไลน์, เซลล์ตาราง, แถวตารางและกลุ่มแถว

ลองตัดเนื้อหาใน div แล้วให้ div เป็นmin-height jsFiddle ที่นี่

<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
    <tbody>
        <tr>
            <td>
                <div style="min-height: 100px; background-color: #ccc">
                Hello World !
                </div>
            </td>
            <td>
                <div style="min-height: 100px; background-color: #f00">
                Goog MOrning !
                </div>
            </td>
        </tr>
    </tbody>
</table>

— โซบินออกัสติน
แหล่งที่มา

5

หากคุณตั้งค่า style = "height: 100px;" ใน td ถ้า td มีเนื้อหาที่ทำให้เซลล์เติบโตมากกว่านั้นก็จะทำให้ไม่ต้องใช้ความสูงต่ำสุดใน td

— ตรงไปตรงมา
แหล่งที่มา

0

ตารางและเซลล์ตารางไม่ใช้min-heightคุณสมบัติการตั้งค่าheightจะเป็นความสูงต่ำสุดเนื่องจากตารางจะขยายออกหากเนื้อหายืดออก

— อากู๋ดอนโด
แหล่งที่มา

-1

เพียงใช้รายการ css ของความสูงต่ำสุดไปยังเซลล์ใดเซลล์หนึ่งของแถวตารางของคุณ ใช้งานได้กับเบราว์เซอร์รุ่นเก่าด้วย

.rowNumberColumn {
    background-color: #e6e6e6;
    min-height: 22;
}

<table width="100%" cellspacing="0" class="htmlgrid-table">
    <tr id="tr_0">
            <td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
            <td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>

— แซคกี้ซาน
แหล่งที่มา