Mam tabelę HTML z dwiema kolumnami. W ostatnim wierszu chcę, aby wydarzyło się co następuje:

Będzie jedna komórka obejmująca dwie kolumny. (colspan = "2") Szerokość tej komórki nie przekroczy szerokości tabeli. Za każdym razem, gdy tekst w tej komórce staje się zbyt duży, chcę, aby obejmował kolejny wiersz, ale nie zwiększał szerokości tabeli. Haczyk polega na tym, że chcę, aby szerokość tabeli była tak duża, jak to konieczne, aby zawierała dwie kolumny bez rozszerzania do innego wiersza (z wyłączeniem ostatniego wiersza).

EDYCJA: To, co mam, nie działa. Problem polega na tym, że jeśli „naprawdę długi tekst” staje się zbyt długi, to rozwija inne „tekstowe” wiadomości zamiast dodawać nowe wiersze.

<table>
<tr><td>text</td><td>text</td></tr>
<tr><td colspan="2">really long text</td></tr>
</table>
1
WillHaack 19 sierpień 2011, 21:11
2
A czego próbowałeś do tej pory?
 – 
Matt Ball
19 sierpień 2011, 21:14
3
Jaki jest twój obecny znacznik, który nie działa?
 – 
Dmitry B.
19 sierpień 2011, 21:14
Zastanów się nad zmianą swojego pytania, to jest bardzo niskiej jakości, opublikuj znaczniki, opublikuj to, czego próbowałeś.
 – 
Jakub
19 sierpień 2011, 21:19
Przepraszam, mam nadzieję, że teraz jest trochę jaśniej
 – 
WillHaack
19 sierpień 2011, 21:33

2 odpowiedzi

Najlepsza odpowiedź

W ostatnim rzędzie zawiń zawartość w div i nadaj jej szerokość, np. 100%, w ten sposób nie zwiększy to szerokości tabeli, ale po prostu zawiń.

<td colspan="2">
  <div style="width:100%"> The content here</div>
</td>

Ponieważ oznaczyłeś to pytanie jako html i css, muszę ci powiedzieć, że jeśli chcesz, aby zawartość dynamicznie tworzyła nowy wiersz, będziesz musiał użyć javascript. To nie jest możliwe bez skryptu, przynajmniej nie wiem o tym.

1
Ibu 19 sierpień 2011, 21:16

Musisz stylizować swój TD za pomocą "word-wrap: break-word;" i ustaw maksymalną szerokość stołu lub TD.

<table><tbody>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td colspan="2" style="max-width:40px; word-wrap: break-word;">really long textsadfadfadfadfadfadsfadfadsfadfadsfasdfasdfasdfasdfasdfasdfasdfasdfa</td>
  </tr>
</tbody></table>

Spowoduje to wygenerowanie tabeli w ten sposób (bez obramowań), ostatnie wiersze po prostu zwiększają wysokość, jeśli tekst jest dłuższy, niż mieści się na szerokość:

enter image description here

2
Radu Maris 19 sierpień 2011, 21:56
1
- Zobacz jsfiddle.net/uDGbm, aby zobaczyć przykładowe skrzypce, z którymi możesz się pobawić.
 – 
Stephen P
19 sierpień 2011, 22:06