Tabella che esce dal div

Ho un problema nel layout nella mia applicazione mvc di primavera. Nella mia app, la tabella che contiene in div uscendo da essa, anche io ho impostato un parametro di larghezza per questo div. Ho provato molte soluzioni che ho cercato su Google ma senza successo. Ecco il mio file jsp, il file css e lo schermo dalla mia app. Come puoi vedere quando il testo nella tabella è lungo, non è una rottura in una nuova riga (come voglio).Tabella che esce dal div

file css

th,td { 
    border-style: solid; 
    border-width: 5px; 
    border-color: #BCBCBC; 
} 


#all { 
    width: 500px; 
} 

#tablediv { 
    width: 400px; 
    float: left; 
}

file JSP

<body> 
<h3>All your notes:</h3> 
<c:if test="${!empty notes}"/> 

<form method="post" action="manage_note"> 

<div id="all"> 
<div id="tablediv"> 

<table> 

<tr> 
    <th class="widther">Note date</th> 
    <th>Description</th> 
</tr> 

<c:forEach items="${notes}" var="note"> 

<tr> 
    <td class="widther">${note.date} ${note.time}</td> 
    <td >${note.description}</td> 
    <td><input type="radio" name="chosen_note" value="${note.note_id}"></td> 
</tr> 

</c:forEach> 

</table> 
</div> 

<div id="addbutton"> 
    <input name="add_note" type="submit" value="Add note"/> 
</div> 


</div> 


<div id="restbuttons"> 
    <input name="edit_note" type="submit" value="Edit"/> 
    <input name="delete_note" type="submit" value="Delete"/> 
</div> 

</form> 

</body>

Ed ecco schermo:

http://imageshack.us/photo/my-images/203/tableproblem.png/

Grazie per anticipo per il vostro aiuto.

fonte

2013-01-22 caro

Questo perché hai una parola lunga circa 100 caratteri, prova a mettere uno spazio nel mezzo e dovrebbe correggersi.

fonte

2013-01-22 19:42:07 hoooman

Credo che la domanda fosse relativa a come gestire la stringa lunga. Non penso che aggiungere semplicemente uno spazio sia una soluzione adeguata. – Axel

Sì, l'aggiunta di spazio funziona, ma come ha detto Axel, in questo caso non è una buona soluzione. – caro

La risposta di hoooman è corretta ma forse vuoi dire qualcos'altro. Puoi utilizzare overflow: auto su quella tabella e anche specificare una larghezza e creerà barre di scorrimento se il contenuto esce dalla tabella.

C'è anche overflow-x e overflow-y per specificare quale asse.

fonte

2013-01-22 19:45:15 fredsbend

Sì, l'overflow funziona, e penso che questa sia la soluzione migliore per la stringa lunga :) Grazie mille :) – caro

@caro Felice di aiutare. – fredsbend

Avrete bisogno di fare due cose per evitare che il tavolo diventi troppo grande.

1) Impostare il table-layout-fixed:

table { 
    table-layout: fixed; 
    width: 100%; 
}

2) Impostare word-wrap-break-word per td/esimo

th,td { 
    border-style: solid; 
    border-width: 5px; 
    border-color: #BCBCBC; 
    word-wrap: break-word; 
}

Si può vedere un esempio di lavoro qui: http://jsfiddle.net/d6WL8/

fonte

2013-01-22 19:47:35 Axel

Sto usando eclispe e non ho un "word-wrap" solo "word-spacing". Ad ogni modo ho provato ad aggiungere "word wrap" ma senza successo – caro

@caro - Ho aggiornato la mia risposta. Sembra che il tuo tavolo si stia espandendo oltre i limiti di #tablediv. È necessario impostarlo su un layout di tabella fisso. – Axel

Assicurati inoltre di includere tutti quanti quelli che hai. Ho notato che avevi 3 colonne di td's e solo 2 th's. È importante che questi match. – Axel

set max-width insieme a word-wrap

fonte

2017-08-04 13:18:36 Jonas

Alcune volte aggiungendo una tabella all'interno di una Div succede. Nel mio caso ho dato il padding-right: 0px per il <div>

fonte

2018-03-06 11:12:23

risposta

Problemi correlati