<table id="table_id">
<tr>
<td>testtesttesttest</td>
<td>testtesttesttest</td>
</tr>
</table>
Chciałbym, jeśli tabela nie mieści się na ekranie, a następnie do drugiej komórki tabeli zostaną przeniesione do innego rzędu w dół? Nie tekst w komórce, ale cała komórka.Owiń wiersz tabeli do następnej linii
Zmień komórki do inline bloków:
#table_id {
display: block;
}
#table_id td {
display: inline-block;
}
td {
background: green
}<table id="table_id">
<tr>
<td>testtesttesttest</td>
<td>testtesttesttest</td>
</tr>
</table>Jesteś bogiem CSS !! Każda inna odpowiedź mówi, że to niemożliwe, ale to zadziałało. Moja sytuacja była taka, że nie mogłem zmienić tabeli na div, ponieważ była ona generowana przez wtyczkę, której nie pisałem. – KalenGi
Nice. Czy istnieje sposób na "zawijanie" całych kolumn, tj. Gdy komórka owija się w jednym wierszu, aby zawinąć tę samą komórkę również w innych wierszach? – rustyx
@rustyx: (nieco późno może, ale) to, co działa dla mnie, ustawia szerokość na komórkach tabeli (w jednostkach em tak, że skaluje się z powiększaniem użytkownika). –
Nie można tego zrobić za pomocą tabeli, siatka "rząd i kolumna" jest stała.
Jednakże można użyć inline-block elementy:
<div id="container">
<div>testtesttesttest</div>
<div>testtesttesttest</div>
</div>
CSS:
#container>div {display:inline-block;vertical-align:top}
Poprawiono na Jukka's answer.
HTML:
<table id="table_id">
<tr>
<td> testtesttesttest</td>
<td> testtesttesttest </td>
<td> testtesttesttest </td>
<td> testtesttesttest </td>
<td> testtesttesttest </td>
</tr>
<tr>
<td> testtesttesttest</td>
<td> testtesttesttest</td>
<td> testtesttesttest</td>
<td> testtesttesttest</td>
<td> testtesttesttest</td>
</tr>
</table>
CSS:
#table_id {display: block; }
#table_id td {display: inline-block; border: 3px solid #FFFFFF;}
td { background: green;
border: 3px solid #FFFFFF;} /* to show cell sizes */
Odwiedź http://jsfiddle.net/zjbyE/391
[Możliwy duplikat to pytanie] (http://stackoverflow.com/questions/13792728/use-jquery -to-move-columns-in-order-to-next-tr-when-page-is-resized) – eggy
@eggy Zdecydowanie nie. Nie wszystko jest jQuery. – Keelan
@Keelan Teraz wszystko jest zapytaniem o media. –