Bagaimana cara memperbaiki ketinggian TR?

102

Apakah mungkin untuk memperbaiki ketinggian baris (tr) di atas meja?

Masalahnya muncul ketika saya mengecilkan jendela browser, beberapa baris mulai diputar-putar, dan saya tidak dapat memperbaiki ketinggian baris.

Saya mencoba beberapa cara: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

Saya menggunakan IE7

Gaya

.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;
}

Kode 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 Amra
sumber

Jawaban:

97

Tabel rapuh (setidaknya, di IE) saat harus memperbaiki ketinggian dan bukan membungkus teks. Saya pikir Anda akan menemukan bahwa satu-satunya solusi adalah meletakkan teks di dalam divelemen, seperti:

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

Dengan cara ini, divtinggi adalah dari sel yang berisi dan teks tidak dapat menumbuhkan div, menjaga sel / baris tetap sama tinggi tidak peduli apa ukuran jendela.

Andy E
sumber
1
Terima kasih atas sarannya, Sepertinya berfungsi, tetapi terlihat agak berantakan.
Amra
Senang membantu :-) Sayangnya, kode yang berantakan biasanya terjadi di peretasan dan solusi.
Andy E
Saya menggunakan [code] .container {width: 100%; max-height: 40px; overflow: hidden; } [/ code] dan [code] <div class = 'container'> </div> [/ code].
Cees Timmerman
Saya telah melakukan metode yang sama, meletakkan div di dalam tag <th> dan itu bekerja dengan baik. Saya mengalami masalah ini hanya di Chrome. FFox, Safari dan IE mendukung dengan baik ketinggian yang diatur pada header tabel. Terima kasih telah berbagi! :)
Mário Rodrigues
tidak berfungsi di safari ... Anda juga perlu menyetel tinggi dan lebar aktual pada div, tidak hanya td
Radu Simionescu
15

Coba masukkan tinggi ke dalam salah satu sel, seperti ini:

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

Namun perlu diperhatikan bahwa Anda tidak akan dapat membuat sel lebih kecil dari yang diminta kontennya. Dalam hal ini Anda harus membuat teks lebih kecil terlebih dahulu.

menyodok
sumber
1
Saya cukup yakin Anda tidak menggunakan "px" dalam atribut html.
unflores
10
Saya cukup yakin Anda dapat menggunakan atribut gaya.
Burak Dobur
11

Menyetel tdketinggian menjadi kurang dari tinggi alami kontennya

Karena sel tabel ingin setidaknya cukup besar untuk membungkus kontennya, jika konten tidak memiliki tinggi yang jelas, sel dapat diubah ukurannya secara sewenang-wenang.

Dengan mengubah ukuran sel, kita dapat mengontrol tinggi baris.

Salah satu cara untuk melakukan ini, adalah mengatur konten dengan absoluteposisi di dalam relativesel, dan mengatur heightsel, dan leftdan topkonten.

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

The table-layoutproperti

Tabel kedua dalam cuplikan di atas telah table-layout: fixedditerapkan, yang menyebabkan sel diberi lebar yang sama, terlepas dari kontennya, di dalam induk.

Menurut caniuse.com , tidak ada masalah kompatibilitas yang signifikan terkait penggunaan table-layoutmulai 12 September 2019.

Atau cukup terapkan widthke sel tertentu seperti pada tabel ketiga.

Metode ini memungkinkan sel berisi konten berukuran efektif yang dibuat dengan menerapkan position: absoluteuntuk diberi ketebalan yang berubah-ubah.

Jauh lebih sederhana ...

Saya benar-benar harus memikirkan hal ini sejak awal; kita dapat memanipulasi konten sel tabel level blok dengan semua cara biasa, dan tanpa sepenuhnya merusak ukuran alami konten dengan position: absolute, kita dapat meninggalkan tabel untuk mencari tahu berapa lebarnya seharusnya.

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

Fred Gandt
sumber
Akhirnya jawaban yang terlihat menjanjikan! Harus mencobanya segera setelah saya di tempat kerja, saya akan memberikan umpan balik jika saya tidak lupa.
jeromej
1
Bekerja seperti pesona! (Peringatan bahwa itu menghapus text-align: centerdan trik pemusatan lainnya meskipun ... karena bergantung pada position: absolute)
jeromej
Ini berfungsi untuk ketinggian dalam kasus saya, tetapi saat menggunakan postion: absolute, saya kehilangan lebar sel otomatis. Mencoba menemukan cara agar tabel tetap menghitung lebar sel dengan benar sambil mengambil kendali atas tinggi baris. Ada pemikiran?
abu
@ash - Saya tidak langsung memikirkan cara apa pun untuk menjaga lebar otomatis sepenuhnya setelah secara efektif menghancurkan ukuran konten, tetapi kita dapat memaksa sel tabel menjadi lebar secara sewenang-wenang. Saya telah memperluas cuplikan contoh untuk menunjukkan satu metode yang mungkin membantu Anda. Saya akan memikirkannya lagi, dan menambahkan lebih banyak detail jika ada sesuatu yang berguna terlintas dalam pikiran :)
Fred Gandt
Terima kasih Fred. Perhatikan bahwa saya dapat memiliki tajuk (<th>) untuk memberikan ukuran tetap pada kolom, tetapi kemudian saya khawatir tajuknya mungkin terlalu sempit atau terlalu lebar.
abu
8

Menempatkan div di dalam td membuatnya bekerja untuk saya. 

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

Lebar tabel Anda adalah 90% yang relatif terhadap penampungnya.

Jika Anda menekan halaman, Anda mungkin juga menekan lebar tabel. Lebar sel juga berkurang dan browser mengimbanginya dengan menambah tinggi.

Agar tingginya tidak tersentuh, Anda harus memastikan lebar sel dapat menampung konten yang diinginkan. Memperbaiki lebar tabel mungkin sesuatu yang ingin Anda coba. Atau mungkin bermain-main dengan min-lebar meja.

baik w
sumber
1

Saya harus melakukan ini untuk mendapatkan hasil yang saya inginkan:

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

Itu menolak untuk bekerja hanya dengan sel atau div dan membutuhkan keduanya.

Jen
sumber
-5

Itu karena kata-kata itu saling membungkus dan berada di baris baru sehingga meregangkan TR. Ini harus memperbaiki masalah Anda:

overflow:hidden;

Masukkan itu ke dalam gaya TR Meskipun seharusnya berhasil, mengapa tidak membiarkannya melebar

PS. Saya tidak mengujinya jadi jangan benci XD

Ozzy
sumber
3
Tidak membenci, tetapi ada daftar gaya yang didukung oleh elemen TD di IE di msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx . overflowbukan salah satu dari mereka.
Andy E