Sabit Tabla Hücre Genişliği

Bir çok insan hala kontrolleri, verileri vb. Düzenlemek için tabloları kullanıyor - bunun bir örneği popüler jqGrid. Ancak, kulağa gelemediğim bir sihir oluyor (yüksek sesle ağlamak için tabloları, ne kadar büyü olabilir?)

Bir tablonun sütun genişliğini ayarlamak ve jqGrid'in yaptığı gibi itaat etmek nasıl mümkün olabilir? Bunu çoğaltmaya çalışırsam, her <td style='width: 20px'>birini ayarlasam bile , bu hücrelerden birinin içeriği 20 pikselden büyük olur olmaz, hücre genişler!

Herhangi bir fikir veya öneriniz var mı?

<col>Tüm satırlar için tabloyu yönetme etiketini kullanmayı deneyebilirsiniz, ancak table-layout:fixedstili <table>veya css sınıfındaki tabloları ayarlamanız overflowve hücreler için stili ayarlamanız gerekir.

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>

ve bu sizin CSS'niz

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

Şimdi HTML5 / CSS3'te sorun için daha iyi bir çözümümüz var. Bence bu tamamen CSS çözümü öneriliyor:

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>

Masanın avcının çözümündewidth bile ayarlanması gerekir . Aksi takdirde çalışmaz. Ayrıca bu yeni CSS3 özelliği vsync önerdi geçerli: . Bu, içinde boşluk olmayan sözcükleri birden çok satıra da böler. Sadece kodu şu şekilde değiştirin:
word-break:break-all;

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

Son sonuç

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

Bir uzun masa td hücresi vardı, bu tabloyu tarayıcının kenarlarına zorladı ve çirkin görünüyordu. Sadece bu sütunun sadece sabit boyutta olmasını ve belirtilen genişliğe ulaştığında kelimeleri kırmasını istedim. Bu benim için iyi çalıştı:

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

Tablo, tr öğeleri için herhangi bir stil belirtmenize gerek yoktur. Ayrıca taşma da kullanabilirsiniz: gizli; diğer cevaplar tarafından önerildiği gibi fazla metnin kaybolmasına neden olur.

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

10x10

FULLSCREEN genişlik tablosu için:

• tablo genişliği% 100 OLMALIDIR

• N colunms gerekiyorsa, THs N + 1 OLMALIDIR

3 sütun için örnek:

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

: ilk çocuk ...: n. çocuk (1) veya ...