Table sortant de div

J'ai un problème de mise en page dans mon spring mvc de l'application. Dans mon application, table contenant en div sortir d'elle même-je configurer un paramètre de largeur pour cette div. J'ai essayé de nombreuses solutions qui ai cherché sur google mais sans succès. Voici mon fichier jsp, css fichiers, et l'écran de mon application. Comme vous pouvez le voir lorsque le texte dans le tableau est long il n'est pas saut à la ligne (comme je le veux).

fichier css

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


#all {
    width: 500px;
}

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

fichier 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>

Et voici l'écran:

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

Merci par avance pour votre aide.

source d'informationauteur caro

  1. 30

    Vous aurez besoin de faire deux choses à éviter que la table ne devienne trop gros.

    1) Définir la table-layout à fixed:

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

    2) Définir word-wrap à break-word pour td/th

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

    Vous pouvez voir un exemple ici: http://jsfiddle.net/d6WL8/

  2. 1

    La réponse par hoooman est correct, mais peut-être vous voulez dire quelque chose d'autre. Vous pouvez utiliser overflow:auto sur la table et aussi spécifier une largeur et il va créer des barres de défilement si le contenu va à l'extérieur de la table.

    Il est également overflow-x et overflow-y pour spécifier l'axe.

  3. 0

    C'est parce que vous avez 1 mot qui est d'environ 100 caractères, essayez de mettre un espace dans le milieu qui et il doit se fixer.

  4. 0

    ensemble max-width avec word-wrap

  5. 0

    À certains moments, l'ajout d'une Table à l'intérieur d'un Div ça se passe.
    Dans mon cas, j'avais donné padding-right:0px pour la <div>