Banyak orang masih menggunakan tabel untuk kontrol tata letak, data dll. - salah satu contoh dari hal ini adalah populer jqGrid. Namun, ada beberapa keajaiban yang terjadi, saya cant tampaknya untuk memahami (tabel-tabel untuk menangis dengan suara keras, berapa banyak keajaiban bisa ada mungkin?)
Bagaimana mungkin untuk set meja's lebar kolom dan harus dipatuhi seperti jqGrid tidak!? Jika saya mencoba untuk meniru ini, bahkan jika saya mengatur setiap <td style='width: 20px'>
, begitu isi salah satu dari sel tersebut lebih besar dari 20px, sel mengembang!
Ide atau wawasan?
Anda bisa mencoba menggunakan <col>
tag mengelola tabel styling untuk semua baris, tetapi anda akan perlu untuk mengatur table-layout:tetap
gaya <table>
atau tabel kelas css dan mengatur overflow
style untuk sel-sel
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
<table class="fixed">
<col width="20px" />
<col width="30px" />
<col width="40px" />
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
dan ini menjadi CSS anda
table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }
Sekarang di HTML5/CSS3 kami memiliki solusi yang lebih baik untuk masalah ini. Menurut saya ini murni CSS solusi yang dianjurkan:
table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/
<table class="fixed">
<tr>
<td>Veryverylongtext</td>
<td>Actuallythistextismuchlongeeeeeer</td>
<td>We should use spaces tooooooooooooo</td>
</tr>
</table>
Anda perlu untuk mengatur meja's lebar
bahkan di haunter's solusi. Selain itu doesn't bekerja.
Juga baru CSS3 fitur yang vsync yang disarankan adalah: word-break:break-semua;
. Ini akan mematahkan kata-kata tanpa spasi di dalamnya untuk beberapa baris juga. Hanya memodifikasi kode seperti ini:
table.fixed { table-layout:fixed; width:90px; word-break:break-all;}
Aku punya satu meja panjang td sel, hal ini memaksa meja ke tepi browser dan tampak jelek. Aku hanya ingin itu kolom untuk menjadi ukuran tetap dan hanya memecahkan kata-kata yang ketika itu mencapai lebar yang ditentukan. Jadi, ini bekerja dengan baik bagi saya:
<td><div style='width: 150px;'>Text to break here</div></td>
Anda don't perlu untuk menentukan jenis style untuk table, tr elemen. Anda juga dapat menggunakan overflow:hidden; seperti yang disarankan oleh jawaban yang lain tetapi menyebabkan kelebihan teks menghilang.
table {
table-layout:fixed; width:200px;
}
table tr {
height: 20px;
}
10x10