จะแก้ไขความสูงของ TR ได้อย่างไร?

102

สามารถแก้ไขความสูงของแถว (tr) บนโต๊ะได้หรือไม่?

ปัญหาจะปรากฏขึ้นเมื่อฉันย่อขนาดหน้าต่างของเบราว์เซอร์บางแถวเริ่มเล่นรอบและฉันไม่สามารถกำหนดความสูงของแถวได้

ฉันลองหลายวิธี: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

ฉันใช้ IE7

สไตล์

.tableContainer{
    color:#0076BF;
    margin: -10px 0px -10px 0px;
    border-spacing: 10px;
    empty-cells:show;
    width:90%;
    text-align:left;
} 

.tableContainer tr td{
    white-space:nowrap;
    text-align:left;
}

รหัส HTML

<table class="tableContainer" cellspacing="10px">
    <tr style="height:15px;">
        <td>NHS Number</td>
        <td>&#160;</td>
        <td>Date of Visit</td>
        <td>&#160;</td>
        <td colspan="3">Care Time Started</td>
        <td>&#160;</td>
        <td rowspan="2" style="text-align:right;vertical-align:bottom;">&#9745;</td>
        <td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/>                        care starts</td>
    </tr>
    <tr>
        <td width="90" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="80" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="40" class="tableContainerRow2">&#160;</td>
        <td  width="5">:</td>
        <td width="40" class="tableContainerRow2">&#160;</td>        
        <td >&#160;</td>
    </tr>
</table>
html  html-table  row 
— อัมรา
แหล่งที่มา

คำตอบ:

97

ตารางเป็นสิ่งที่ไม่ดี (อย่างน้อยใน IE) เมื่อต้องแก้ไขความสูงและไม่ตัดข้อความ ฉันคิดว่าคุณจะพบว่าทางออกเดียวคือใส่ข้อความไว้ในdivองค์ประกอบดังนี้:

td.container > div {
    width: 100%;
    height: 100%;
    overflow:hidden;
}
td.container {
    height: 20px;
}
<table>
    <tr>
        <td class="container">
            <div>This is a long line of text designed not to wrap 
                 when the container becomes too small.</div>
        </td>
    </tr>
</table>
ขยายข้อมูลโค้ด

ด้วยวิธีนี้divความสูงของเซลล์จะเท่ากับเซลล์ที่มีและข้อความไม่สามารถขยายได้divทำให้เซลล์ / แถวมีความสูงเท่ากันไม่ว่าขนาดหน้าต่างจะเป็นเท่าใดก็ตาม

— แอนดี้อี
แหล่งที่มา
1
ขอบคุณสำหรับคำแนะนำดูเหมือนจะใช้งานได้ แต่มันดูยุ่งไปหน่อย
— Amra
ยินดีให้ความช่วยเหลือ :-) น่าเสียดายที่รหัสยุ่งมักเกิดขึ้นในการแฮ็กและวิธีแก้ปัญหา
— Andy E
ฉันใช้ [code] .container {width: 100%; ความสูงสูงสุด: 40px; ล้น: ซ่อน; } [/ code] และ [code] <div class = 'container'> </div> [/ code]
— Cees Timmerman
ฉันใช้วิธีเดียวกันนี้โดยใส่ div ไว้ในแท็ก <th> และใช้ได้ดี ฉันมีปัญหานี้เฉพาะใน Chrome FFox, Safari และ IE รองรับความสูงที่ตั้งไว้บนส่วนหัวของตารางได้ดี ขอบคุณสำหรับการแบ่งปัน! :)
— Mário Rodrigues
ใช้ไม่ได้ในซาฟารี ... คุณต้องตั้งค่าความสูงและความกว้างจริงบน div ด้วยไม่ใช่เฉพาะ td
— Radu Simionescu
15

ลองใส่ความสูงลงในเซลล์ใดเซลล์หนึ่งดังนี้:

<table class="tableContainer" cellspacing="10px">
 <tr>
  <td style="height:15px;">NHS Number</td>
  <td>&#160;</td>

อย่างไรก็ตามโปรดทราบว่าคุณจะไม่สามารถทำให้เซลล์มีขนาดเล็กกว่าที่เนื้อหาต้องการได้ ในกรณีนี้คุณจะต้องทำให้ข้อความเล็กลงก่อน

— โผล่
แหล่งที่มา
1
ฉันค่อนข้างมั่นใจว่าคุณไม่ได้ใช้ "px" ในแอตทริบิวต์ html
— คลายความร้อนใน
10
ฉันค่อนข้างมั่นใจว่าคุณสามารถใช้ในสไตล์แอตทริบิวต์
— Burak Dobur
11

ตั้งค่าtdความสูงให้น้อยกว่าความสูงตามธรรมชาติของเนื้อหา

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

เราสามารถควบคุมความสูงของแถวได้ด้วยการปรับขนาดเซลล์

วิธีหนึ่งในการทำเช่นนี้คือการตั้งค่าเนื้อหาด้วยabsoluteตำแหน่งภายในrelativeเซลล์และตั้งค่าheightของเซลล์และleftและtopของเนื้อหา

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
.set-height td {
  position: relative;
  overflow: hidden;
  height: 3em;
}
.set-height p {
  position: absolute;
  margin: 0;
  top: 0;
}
/* table layout fixed */
.layout-fixed {
  table-layout: fixed;
}
/* td width */
.td-width td:first-child {
  width: 33%;
}
<table><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>table-layout: fixed</code> applied:</h3>
<table class="layout-fixed"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>&lt;td&gt; width</code> applied:</h3>
<table class="td-width"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
ขยายข้อมูลโค้ด

table-layoutคุณสมบัติ

ตารางที่สองในตัวอย่างข้อมูลด้านบนมี table-layout: fixedนำไปใช้ซึ่งทำให้เซลล์ได้รับความกว้างเท่ากันโดยไม่คำนึงถึงเนื้อหาภายในพาเรนต์

ตามcaniuse.comไม่มีปัญหาความเข้ากันได้ที่สำคัญเกี่ยวกับการใช้ไฟล์table-layoutณ วันที่ 12 กันยายน 2019

หรือใช้widthกับเซลล์เฉพาะดังตารางที่สาม

วิธีการเหล่านี้ช่วยให้เซลล์มีเนื้อหาที่ไม่มีขนาดอย่างมีประสิทธิภาพที่สร้างขึ้นโดยการนำไปใช้ position: absoluteเพื่อให้ได้เส้นรอบวงบางส่วน

ง่ายกว่ามาก ...

ฉันควรจะคิดเรื่องนี้ตั้งแต่แรก เราสามารถจัดการกับเนื้อหาของเซลล์ตารางระดับบล็อกได้ด้วยวิธีปกติทั้งหมดและโดยไม่ทำลายขนาดธรรมชาติของเนื้อหาโดยสิ้นเชิงด้วยposition: absoluteเราสามารถออกจากตารางเพื่อหาว่าความกว้างควรเป็นเท่าใด

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
table p {
  margin: 0;
}
.cap-height p {
  max-height: 3em;
  overflow: hidden;
}
<table><tbody>
  <tr class="cap-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td>
  </tr>
  <tr class="cap-height">
    <td><p>Bar</p></td>
    <td>Baz</td>
  </tr>
  <tr>
    <td>Qux</td>
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
  </tr>
</tbody></table>
ขยายข้อมูลโค้ด

— เฟรดแกนด์
แหล่งที่มา
ในที่สุดคำตอบที่มีแนวโน้ม! ต้องลองทันทีที่ฉันจะไปทำงานฉันจะให้ข้อเสนอแนะหากฉันไม่ลืม
— jeromej
1
ทำงานอย่างมีเสน่ห์! (คำเตือนว่าจะลบtext-align: centerและเทคนิคการตั้งศูนย์อื่น ๆ แม้ว่า ... ตามที่มันขึ้นอยู่position: absolute)
— jeromej
สิ่งนี้ใช้ได้กับความสูงในกรณีของฉัน แต่เมื่อใช้postion: absoluteฉันจะสูญเสียความกว้างของเซลล์อัตโนมัติ พยายามหาวิธีให้ตารางยังคงคำนวณความกว้างของเซลล์ได้อย่างเหมาะสมในขณะที่ควบคุมความสูงของแถว ความคิดใด ๆ ?
— เถ้า
@ash - ฉันไม่ได้คิดว่าจะรักษาความกว้างอัตโนมัติในทันทีหลังจากทำลายขนาดของเนื้อหาได้อย่างมีประสิทธิภาพ แต่เราสามารถบังคับให้เซลล์ตารางกว้างได้ตามอำเภอใจ ฉันได้ขยายตัวอย่างข้อมูลโค้ดเพื่อแสดงวิธีการหนึ่งที่อาจช่วยคุณได้ ฉันจะคิดให้มากขึ้นและเพิ่มรายละเอียดเพิ่มเติมหากมีสิ่งใดที่เป็นประโยชน์อยู่ในใจ :)
— Fred Gandt
ขอบคุณเฟรด โปรดทราบว่าฉันสามารถมีส่วนหัว (<th>) เพื่อกำหนดขนาดคงที่ให้กับคอลัมน์ได้ แต่ฉันกังวลว่าส่วนหัวอาจจะแคบหรือกว้างเกินไป
— เถ้า
2

ความกว้างของตารางคือ 90% ซึ่งสัมพันธ์กับคอนเทนเนอร์

หากคุณบีบหน้าคุณอาจจะบีบความกว้างของตารางด้วย ความกว้างของเซลล์ลดลงเช่นกันและเบราว์เซอร์จะชดเชยด้วยการเพิ่มความสูง

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

— ตกลง
แหล่งที่มา
1

ฉันต้องทำสิ่งนี้เพื่อให้ได้ผลลัพธ์ที่ฉันต้องการ:

<td style="font-size:3px; float:left; height:5px; vertical-align:middle;" colspan="7"><div style="font-size:3px; height:5px; vertical-align:middle;"><b><hr></b></div></td>

มันปฏิเสธที่จะทำงานกับเซลล์หรือ div เท่านั้นและต้องการทั้งสองอย่าง

— เจน
แหล่งที่มา
-5

นั่นเป็นเพราะคำกำลังห่อและกำลังขึ้นบรรทัดใหม่ดังนั้นจึงยืด TR สิ่งนี้ควรแก้ไขปัญหาของคุณ:

overflow:hidden;

ใส่สิ่งนั้นในรูปแบบ TR แม้ว่ามันควรจะใช้งานได้ แต่ทำไมไม่ปล่อยให้มันยืด o0

ปล. ฉันไม่ได้ทดสอบมันดังนั้นอย่าเกลียด XD

— Ozzy
แหล่งที่มา
3
ไม่เกลียด แต่มีรายชื่อของรูปแบบการสนับสนุนโดยองค์ประกอบ TD ใน IE ที่msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx overflowไม่ใช่หนึ่งในนั้น
— Andy E
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.