Setați lățimea minimă în tabelul HTML (Programare, Html, Css, Tabel Html)

Thanhma San a intrebat.

Tabelul meu are mai multe coloane.

Fiecare coloană ar trebui să aibă o lățime dinamică care depinde de dimensiunea ferestrei browserului. Pe de altă parte, fiecare coloană nu trebuie să fie prea mică. Așa că am încercat să setez min-width pentru aceste coloane, dar nu este o proprietate validă. Am încercat min-width pentru <td> de asemenea, dar și aceasta este o proprietate invalidă.

Există vreo modalitate de a seta min-width pentru col/td în tabelul HTML?

Comentarii

  • Adăugați un <div> în interiorul <td> și setați-l min-width la ceea ce doriți –  > Por Shadow.
  • Dacă trebuie neapărat să folosiți <td> ar trebui să vedeți acest lucru: stackoverflow.com/questions/6426779/…  > Por Stacey Garrison.
  • cu px – da ; cu % – nu 🙁 – –  > Por dszakal.
7 răspunsuri
Ali Sağırvelioğulları

încercați asta:

Comentarii

  • Acesta este răspunsul acceptat, dar uitându-mă la răspunsul de mai jos: stackoverflow.com/a/29379832/207552, se pare că rezultatele sunt nedefinite. –  > Por bschandramohan.
  • O metodă foarte proastă! 1) Utilizarea lățimilor absolute este total inacceptabilă și 2) Trebuie să se repete acest stil în mod redundant la toate <td>s din tabel, în loc să se folosească o singură dată într-o foaie de stil! –  > Por Apostolos.
  • @Apostolos De ce sunt lățimile absolute inacceptabile? Asta depinde de cazul de utilizare. Și, de asemenea, puteți folosi, desigur, selectori corespunzători și/sau nume de clase în loc de stiluri în linie. Acesta este doar un exemplu minim. Problema cu acest răspuns este că, conform specificațiilor, are un comportament nedefinit. –  > Por trixn.
  • Este rău pentru că 1) este depinde de lățimea ecranului și 2) se aplică la toate tabelele, , ceea ce s-ar putea să nu fie în regulă. (1) este gestionat prin utilizarea procentelor, iar (2) este gestionat prin utilizarea numelor de clasă. –  > Por Apostolos.
o.v.

min-width și max-width nu funcționează așa cum vă așteptați pentru celulele de tabel. De la spec:

În CSS 2.1, efectul „min-width” și „max-width” asupra tabelelor, tabelelor în linie, celulelor de tabel, coloanelor de tabel și grupurilor de coloane este nedefinit.

Acest lucru nu s-a schimbat în CSS3.

Comentarii

  • De fapt, acest lucru s-a schimbat în Modelul de cutie CSS3 iar proprietățile se aplică la „toate elementele, cu excepția elementelor inline neînlocuite, a rândurilor de tabel și a grupurilor de rânduri” –  > Por cyberskunk.
  • min-width și max-width pe td funcționează cu px, dar nu funcționează cu % (cel mai recent Chrome) –  > Por dszakal.
Petr Cibulka

Încercați să folosiți un element invizibil (sau un psuedoelement) pentru a forța celulele de tabel să se extindă.

td:before {
  content: '';
  display: block; 
  width: 5em;
}

JSFiddle: https://jsfiddle.net/cibulka/gf45uxr6/1/

Comentarii

  • Linkul dvs. este mort, iar soluția dvs. nu a funcționat pentru mine! –  > Por Mojtaba.
  • Cred că nu va funcționa dacă aveți table-layout: fixed;. –  > Por sr9yar.
Redous
<table style="min-width:50px; max-width:150px;">
    <tr>
        <td style="min-width:50px">one</td>
        <td style="min-width:100px">two</td>
    </tr>
</table>

Acest lucru funcționează pentru mine folosind un script de e-mail.

Comentarii

  • Atunci acesta ar trebui să fie un comentariu, nu un răspuns, My Lord –  > Por Thanhma San.
AlexMorley-Finch

Niciuna dintre aceste soluții nu a funcționat pentru mine. Singura soluție pe care am găsit-o a fost, adunarea tuturor dimensiunilor de lățime minimă împreună și aplicarea acesteia la întregul tabel. Evident, acest lucru funcționează doar dacă știi toate dimensiunile coloanelor în avans, ceea ce eu știu. Tabelele mele arată cam așa:

var columns = [
  {label: 'Column 1', width: 80 /* plus other column config */},
  {label: 'Column 2', minWidth: 110 /* plus other column config */},
  {label: 'Column 3' /* plus other column config */},
];

const minimumTableWidth = columns.reduce((sum, column) => {
  return sum + (column.width || column.minWidth || 0);
}, 0);

tableElement.style.minWidth = minimumTableWidth + 'px';

Acesta este un exemplu și nu este un cod recomandat. Adaptați ideea la cerințele dumneavoastră. De exemplu, cele de mai sus sunt în javascript și nu vor funcționa dacă utilizatorul are JS dezactivat, etc.

utilizator9413974

O modalitate ar trebui să fie adăugarea unui <div style="min-width:XXXpx"> în interiorul td-ului și să se lase <td style="width:100%">

AmirtharajCVijay
<table style="border:2px solid #ddedde">
    <tr>
        <td style="border:2px solid #ddedde;width:50%">a</td>
        <td style="border:2px solid #ddedde;width:20%">b</td>
        <td style="border:2px solid #ddedde;width:30%">c</td>
    </tr>
    <tr>
        <td style="border:2px solid #ddedde;width:50%">a</td>
        <td style="border:2px solid #ddedde;width:20%">b</td>
        <td style="border:2px solid #ddedde;width:30%">c</td>
    </tr>
</table>

Comentarii

  • Definirea lățimii în procente doar să o facă dinamică pe baza dimensiunii ferestrei, dar ceea ce vreau este o lățime dinamică ȘI o lățime minimă –  > Por Thanhma San.