În tabelul I seta lățimea de la prima celulă dintr-o coloană să fie 100px
.
Cu toate acestea, atunci când textul într-una din celula în această coloană este prea lung, lățimea de coloană devine mai mult decât 100px
. Cum as putea dezactiva această expansiune?
M-am jucat cu ea pentru un pic, deoarece am avut probleme cu imaginind-l.
Trebuie să setați lățimea celulei (fie "- lea " sau "td", a lucrat, l-am setat ambele) ȘI setați masa-layoutla
fix`. Pentru unii motiv, lățimea celulei pare a sta numai reparat dacă lățimea tabelului este stabilit, de asemenea (cred că's o prostie, dar cum zici tu).
De asemenea, este util să se stabilească `preaplin de proprietate la "ascunse" pentru a preveni orice text suplimentar la ieșirea de la masă.
Tu ar trebui să asigurați-vă că pentru a lăsa toate riverane și dimensionare pentru CSS, de asemenea.
Ok deci aici's de ce am eu:
table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
th,
td {
border: 1px solid black;
width: 100px;
overflow: hidden;
}
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
[Aici este în JSFiddle][1]
Acest tip a avut o problemă similară: https://stackoverflow.com/q/446624/534056
A se vedea: http://www.html5-tutorials.org/tables/changing-column-width/
După masă tag-ul, de a folosi col element. nu't nevoie de un tag de închidere.
De exemplu, dacă ai avea trei coloane:
<table>
<colgroup>
<col style="width:40%">
<col style="width:30%">
<col style="width:30%">
</colgroup>
<tbody>
...
</tbody>
</table>
Trebuie doar să adăugați <div> tag interior
defini lățimea în interiorul
de exemplu.
<td><div style="width: 50px" >...............</div></td>
Sună cam repetitive, dar dă-mi rezultatul dorit. Pentru a realiza acest lucru cu usurinta de mult, poate ai nevoie de a pune valorile CSS într-o clasă în stilul tău-foaie:
.td_size {
width:200px;
height:50px;
max-width:200px;
min-width:200px;
max-height:50px;
min-height:50px;
**overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/
}
apoi:
<td class="td_size">
Locul atributului class la orice <td>
vrei.
Am folosit acest
.app_downloads_table tr td:first-child {
width: 75%;
}
.app_downloads_table tr td:last-child {
text-align: center;
}
Setarea asta:
style="min-width:100px;"
A lucrat pentru mine.
Ca pe răspunsul meu aici, este de asemenea posibil să se utilizeze o tabelul cap (care poate fi gol) și se aplică relativă latimi pentru fiecare masă de cap mobil. Lățimile de toate celulele din corp de masă se va conforma cu lățimea lor în capul coloanei. Exemplu:
HTML
<table>
<thead>
<tr>
<th width="5%"></th>
<th width="70%"></th>
<th width="15%"></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Some text...</td>
<td>May 2018</td>
<td>Edit</td>
</tr>
<tr>
<td>2</td>
<td>Another text...</td>
<td>April 2018</td>
<td>Edit</td>
</tr>
</tbody>
</table>
CSS
table {
width: 600px;
border-collapse: collapse;
}
td {
border: 1px solid #999999;
}
Alternativ, utilizați colgroup
cum a sugerat în Hyathin's a răspunde.
KAsun are dreptate. Aici este codul corect...
<style type="text/css">
th.first-col > div,
td.first-col > div {
overflow:hidden;
white-space:nowrap;
width:100px
}
</style>
<table>
<thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
<tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>
Face răspunsul acceptat să răspundă pentru ecrane mici, când mai mică decât lățimea fixă.
HTML:
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
CSS
table{
border: 1px solid black;
table-layout: fixed;
max-width: 600px;
width: 100%;
}
th, td {
border: 1px solid black;
overflow: hidden;
max-width: 300px;
width: 100%;
}
JS Vioara
Am găsit KAsun's a răspunde merge mai bine folosind vw în loc de px astfel:
<td><div style="lățime: 10vw" >...............</div></td>
Aceasta a fost singura styling am nevoie pentru a ajusta lățimea coloanei