Memperbaiki Lebar Sel Meja

Banyak orang masih menggunakan tabel untuk kontrol tata letak, data, dll. - salah satu contohnya adalah jqGrid yang populer. Namun, ada beberapa keajaiban yang sepertinya tidak bisa saya pahami (meja-meja untuk menangis dengan suara keras, berapa banyak sihir yang mungkin ada?)

Bagaimana mungkin mengatur lebar kolom tabel dan mematuhinya seperti yang dilakukan jqGrid !? Jika saya mencoba mereplikasi ini, bahkan jika saya mengatur setiap <td style='width: 20px'>, segera setelah konten dari salah satu sel lebih besar dari 20px, sel mengembang!

Ada ide atau wawasan?

Anda bisa mencoba menggunakan <col>tag manage styling table untuk semua baris tetapi Anda perlu mengatur table-layout:fixedstyle pada <table>tabel atau kelas css dan mengatur overflowstyle untuk 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 adalah 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 pendapat saya solusi murni CSS ini direkomendasikan:

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 mengatur meja widthbahkan dalam solusi hantu . Kalau tidak, itu tidak akan berhasil.
Juga fitur CSS3 baru yang vsync disarankan adalah: word-break:break-all;. Ini akan memecah kata-kata tanpa spasi di dalamnya untuk beberapa baris juga. Cukup modifikasi kode seperti ini:

table.fixed { table-layout:fixed; width:90px; word-break:break-all;}

Hasil akhir

table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

Saya punya satu sel td meja panjang, ini memaksa meja ke tepi browser dan tampak jelek. Saya hanya ingin kolom itu ukuran tetap saja dan memecahkan kata-kata ketika mencapai lebar yang ditentukan. Jadi ini bekerja dengan baik untuk saya:

<td><div style='width: 150px;'>Text to break here</div></td>

Anda tidak perlu menentukan jenis gaya apa pun ke tabel, tr elemen. Anda juga dapat menggunakan overflow: hidden; seperti yang disarankan oleh jawaban lain tetapi menyebabkan kelebihan teks menghilang.

table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10

untuk tabel lebar FULLSCREEN:

• lebar meja HARUS 100%

• jika perlu N kolom, maka HARUS N + 1

contoh untuk 3 kolom:

table.fixed {
      table-layout: fixed;
      width: 100%;
    }
    table.fixed td {
      overflow: hidden;
    }

  <table class="fixed">
      <col width=20 />
      <col width=20 />
      <col width=20 />
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>FREE</th>
    </tr>
    <tr>
      <td>text111111111</td>
      <td>text222222222</td>
      <td>text3333333</td>
    </tr>
  </table>

table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

: first-child ...: nth-child (1) atau ...