web-dev-qa-db-fra.com

Table sortant de div

J'ai un problème de mise en page dans mon application MVC printanière. Dans mon application, la table qui contient dans div en sort même si j'ai défini un paramètre de largeur pour cette div. J'ai essayé beaucoup de solutions que j'ai googlé mais sans succès. Voici mon fichier jsp, mon fichier CSS et mon écran de mon application. Comme vous pouvez le constater lorsque le texte d'un tableau est long, il n'est pas cassé à la nouvelle ligne (comme je le souhaite).

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/

htmlcsshtml-table
14
caro

Vous devez faire deux choses pour éviter que la table ne devienne trop grande.

1) Définissez le table-layout sur fixed:

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

2) Réglez Word-wrap sur 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 de travail ici: http://jsfiddle.net/d6WL8/

35
Axel

La réponse de hoooman est correcte mais vous voulez peut-être dire autre chose. Vous pouvez utiliser overflow: auto sur cette table, spécifier une largeur et créer des barres de défilement si le contenu sort de la table.

Il existe également overflow-x et overflow-y pour spécifier quel axe.

2
fredsbend

définir max-width avec Word-wrap 

0
Jonas

C'est une vieille question, mais j'ai une méthode plus simple.

Ajoutez simplement ceci :

th, td {
    Word-break: break-Word; /*or you can use Word-break:break-all*/
    min-width: 50px; /*set min-width as needed*/
}

le min-width pour th ou td ne fonctionnera pas si votre table est déjà défini sur table-layout:fixed. Supprimez-le simplement.

ou ajoutez ceci si vous ne trouvez pas le vieux css pour table-layout

table {
    table-layout:unset !important;
}

assurez-vous de donner un class / id supplémentaire avant la table si vous voulez que le code ne fonctionne que sur la page de votre choix.

Exemple :

.entry-content table {
    table-layout: unset !important;
}
.entry-content th, .entry-content td {
    Word-break: break-Word;
    min-width: 50px;
}

J'espère que cela peut vous aider tous. Bonne chance!

0
Digital Fun

C'est parce que vous avez 1 mot d'environ 100 caractères, essayez de mettre un espace au milieu et cela devrait se réparer tout seul.

0
hoooman

Je faisais également face à ce problème, ai ajouté cette classe dans css et a corrigé Tableau { Margin-left: 0 }

0
Ashutosh Jha

Il arrive parfois que l’on ajoute une table dans une div. Dans mon cas, j’avais donné padding-right: 0px pour le <div>

0
MD Shahrouq