TR'nin yüksekliği nasıl düzeltilir?

102

Bir sıranın (tr) yüksekliğini bir masaya sabitlemek mümkün müdür?

Sorun, tarayıcının penceresini küçülttüğümde ortaya çıkıyor, bazı satırlar oynamaya başlıyor ve satırın yüksekliğini düzeltemiyorum.

Birkaç yol denedim: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

IE7 kullanıyorum

Tarzı

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

<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 
— Amra
kaynak

Yanıtlar:

97

Yükseklikleri sabitlemek ve metni kaydırmamak söz konusu olduğunda tablolar şüphelidir (en azından IE'de). Sanırım tek çözümün metni bir divöğenin içine yerleştirmek olduğunu göreceksiniz , örneğin:

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>
Snippet'i genişlet

Böylelikle , pencere boyutu ne olursa olsun hücreyi / satırı aynı yükseklikte tutarak divmetin, içerdiği hücrenin yüksekliği olur ve metin büyüyemez div.

— Andy E
kaynak
1
Tavsiye için teşekkürler, işe yarıyor gibi görünüyor, ama yine de biraz dağınık görünüyor.
— Amra
Yardımcı olmaktan mutluluk duyarız :-) Ne yazık ki, korsanlık ve geçici çözümlerde genellikle karışık kod söz konusudur.
— Andy E
[Kod] .container {genişlik:% 100; maksimum yükseklik: 40px; taşma: gizli; } [/ code] ve [code] <div class = 'container'> </div> [/ code].
— Cees Timmerman
Aynı yöntemi <th> etiketinin içine bir div koyarak yaptım ve iyi çalıştı. Bu sorunu yalnızca Chrome'da yaşadım. FFox, Safari ve IE, tablo başlığında ayarlanan yüksekliği iyi destekledi. Paylaşım için teşekkürler! :)
— Mário Rodrigues
does not safari iş ... siz de, sadece td div üzerindeki gerçek yüksekliğini ve genişliğini ayarlamak için gerekmez
— Radu Simionescu
15

Yüksekliği aşağıdaki gibi hücrelerden birine koymayı deneyin:

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

Ancak, hücreyi içeriğin gerektirdiğinden daha küçük yapamayacağınızı unutmayın. Bu durumda, önce metni küçültmeniz gerekir.

— dürtmek
kaynak
1
Html özelliklerinde "px" kullanmadığınızdan oldukça eminim.
— 2016
10
Stil niteliğinde kullanabileceğinizden oldukça eminim.
— Burak Dobur
11

tdYüksekliği içeriğinin doğal yüksekliğinden daha aza ayarlama

Tablo hücreleri en azından içeriklerini kaplayacak kadar büyük olmak istediklerinden, içeriğin görünür yüksekliği yoksa hücreler rastgele yeniden boyutlandırılabilir.

Hücreleri yeniden boyutlandırarak satır yüksekliğini kontrol edebiliriz.

Bunu yapmanın bir yolu, bir içerik ayarlamaktır absoluteiçinde pozisyon relativehücresi ve set heighthücrenin ve leftve topiçeriğin.

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>
Snippet'i genişlet

table-layoutözellik

Yukarıdaki kod parçacığındaki ikinci tablo table-layout: fixeduygulandı, bu da hücrelere içeriklerine bakılmaksızın üst öğe içinde eşit genişlik verilmesine neden oluyor.

Caniuse.com'a göre , table-layout12 Eylül 2019 itibariyle kullanımıyla ilgili önemli bir uyumluluk sorunu yok .

Veyawidth üçüncü tablodaki gibi belirli hücrelere uygulayın .

Bu yöntemler, uygulanarak oluşturulan etkili boyutsuz içeriği içeren hücrenin position: absolutekeyfi bir çevreye verilmesine izin verir .

Çok daha basit ...

Bunu gerçekten baştan düşünmeliydim; çalışacağımız blok seviyesi her zamanki yollarla tablo hücresi içeriği ve tamamen birlikte içeriğin doğal boyutunu yok etmeden position: absolute, biz genişlikte olmalıdır ne şekle masayı terk edebilir.

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>
Snippet'i genişlet

— Fred Gandt
kaynak
Sonunda umut verici görünen bir cevap! İşe girer girmez denemeliyim, unutmazsam geri bildirimde bulunacağım.
— jeromej
1
Büyü gibi çalıştı! ( text-align: centerYine de kaldırdığı ve diğer merkezleme hilelerini yaptığı konusunda uyarı … dayandığı gibi position: absolute)
— jeromej
Bu benim durumumda yükseklik için çalışıyor, ancak kullanırken postion: absoluteotomatik hücre genişliğini kaybediyorum. Satır yüksekliğini kontrol altına alırken tablonun hücre genişliğini doğru bir şekilde hesaplamasını sağlamanın bir yolunu bulmaya çalışıyorum. Düşüncesi olan var mı?
— kül
@ash - İçeriğin boyutunu etkili bir şekilde yok ettikten sonra tam otomatik genişliği korumanın herhangi bir yolunu hemen düşünmüyorum, ancak tablo hücrelerini rastgele geniş olmaya zorlayabiliriz. Size yardımcı olabilecek bir yöntemi göstermek için örnek parçacığı genişlettim. Biraz daha düşüneceğim ve aklıma yararlı bir şey gelirse daha fazla ayrıntı ekleyeceğim :)
— Fred Gandt
Teşekkürler Fred. Sütunlara sabit bir boyut vermek için başlıklara (<th>) sahip olabileceğime dikkat edin, ancak o zaman başlıkların çok dar veya çok geniş olabileceğinden endişeleniyorum.
— kül
8

Bir td içine div koymak benim için çalışmasını sağladı. 

<table width="100%">
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>
— user2987600
kaynak
2

Masa genişliğiniz, kabına göre% 90'dır.

Sayfayı sıkıştırırsanız, muhtemelen tablo genişliğini de sıkıştırmış olursunuz. Hücrelerin genişliği de azalır ve tarayıcı, yüksekliği artırarak telafi eder.

Yüksekliğe dokunulmaması için, hücrelerin genişliklerinin amaçlanan içeriği tutabileceğinden emin olmalısınız. Masa genişliğini sabitlemek, muhtemelen denemek isteyeceğiniz bir şeydir. Veya masanın minimum genişliğiyle oynayabilirsiniz.

— tamam
kaynak
1

İstediğim sonucu elde etmek için bunu yapmak zorundaydım:

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

Yalnızca hücre veya div ile çalışmayı reddetti ve her ikisine de ihtiyacı vardı.

— Jen
kaynak
-5

Bunun nedeni, kelimelerin sarmalaması ve yeni satırlara girmesi dolayısıyla TR'yi genişletmesidir. Bu, sorununuzu çözmelidir:

overflow:hidden;

Bunu TR stillerine koyun Çalışması gerekse de, neden esnetmesine izin vermiyorsunuz?

PS. Test etmedim bu yüzden XD'den nefret etmeyin

— Ozzy
kaynak
3
Nefret etmiyorum, ancak msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx adresinde IE'de TD öğesi tarafından desteklenen stillerin bir listesi var . overflowonlardan biri değil.
— Andy E
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.