latime fixa coloana in tabel html

Coduri intrebari, probleme legate de HTML, XHTML si CSS
andras
Mesaje:430

latime fixa coloana in tabel html

Salut,
Cum fac o coloana sa aiba latime fixa intr-un tabel html ? Ex. coloana Denumire produs poate avea intre 2 si 200 caractere, dar eu vreau sa o pastrez fixa ca latime, dar inaltimea liniei sa fie variabila in functie de lungimea sirului respectiv, deci sa-mi afiseze pe mai multe rinduri. Am incercat cu max-width: 150px; dar asa textul (daca e mai lung) imi iese in exteriorul celulei <td>. Multumesc.

MarPlo Mesaje:4343
Depinde ce continut adaugi in celula de tabel. In css trebuie definita dimensiunea elementelor adaugate in celula sa tina cont de latimea coloanei.
Daca e vorba doar de text simplu, daca ai coloana cu latime fixa (width: valoare;) ar trebui sa nu depaseasca marginile celulei, ci sa treaca pe un alt rand.
Testeaza acest exemplu:

Cod: Selectaţi tot

<style>
#tb1 {
  position: relative;
  margin: 4px auto;
  width: 90%;
  border: 1px solid #333;
}
#tb1 td, #tb1 th {
  border: 1px solid #999;
}
#tb1 td.col {
  width: 150px;
}
#tb1 td input {
  width: 130px;
}
</style>

<table id="tb1"><tr>
  <th>titlu 1</th>
  <th>titlu 2</th>
</tr><tr>
  <td class="col">linia 2- coloana 1</td>
  <td>linia 2- coloana 2</td>
</tr><tr>
  <td class="col">linia 3- coloana 1 , Text lung adaugat in coloana. Va fi afisat automat pe randuri fara sa depaseasca celula.<br>
  Caseta text: <input type="text" /></td>
  <td>linia 3- coloana 2</td>
</tr><tr>
  <td class="col">linia 4- coloana 1
  <p>Text adaugat in element tip paragraf in celula de tabel html. Trece automat pe rand nou.</p></td>
  <td>linia 4- coloana 2</td>
</tr></table>

andras Mesaje:430
Exemplul este clar si m-am inspirat cu succes. La mine intervenea o problema si cind textul nu avea spatii (era interptetat ca un singur cuvint). Am pus in css word-break: break-all; si problema s-a rezolvat. Multumesc.

Subiecte similare