css - taille - td width not working




Comment forcer le contenu de la cellule de tableau<td> à envelopper? (5)

Heres la page entière * wrappable est défini dans un fichier main.css

/* Wrappable cell
* Add this class to make sure the text in a cell will wrap.
* By default, data_table tds do not wrap.
*/
td.wrappable,
table.data_table td.wrappable {
    white-space: normal;
}                

Voici la page entière:

<%@ include file="../../include/pre-header.html" %>
<form id="commentForm" name="commentForm" action="" method="post">



    <ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
        <ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?   entryId=${entry.entryId}" />
        <table class="data_table vert_scroll_table">



            </tr>
            <tr>
                <ctl:sortableTblHdr styleClass="center" title="Comments" property="comment" type="top">Comments</ctl:sortableTblHdr>
            </tr>


            <c:forEach var="comments" items="${entry.comments}">


                <tr id="id${comments.id}">
                    <td id="comments-${comments.id}" class="wrappable" style="width:400px;">${comments.comment}</td>
                </tr>



            </c:forEach>
            <c:if test="${lock.locked || form.entryId < 0 }">
                <%-- This is the row for adding a new comment. --%>
                    <tr id="commentRow">
                        <td><input type="text" id="comment" name="comment" size="50" maxlength="250" onkeypress="javascript:return noenter();" />
                            <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
                        </td>

                    </tr>
            </c:if>

        </table>

    </ctl:vertScroll>
</form>

Il s'étire juste chaque fois que je soumets.
Cette page est dans une div aussi. Ai-je besoin de définir la largeur de la div et la table aussi?


.wrappable {débordement: caché; max-largeur: 400px; word-wrap: mot de passe; }

J'ai testé avec les données binaires et son fonctionnement parfaitement ici.


C'est une autre façon de s'attaquer au problème si vous avez de longues chaînes (comme les noms de chemin d'accès aux fichiers) et que vous voulez seulement casser les chaînes sur certains caractères (comme les barres obliques). Vous pouvez insérer des caractères Unicode Zero Width Space juste avant (ou après) les barres obliques dans le code HTML.


Si vous utilisez la table réactive Bootstrap, vous voulez simplement définir la largeur maximale pour une colonne particulière et créer un habillage de texte, ce qui fait que le style de cette colonne fonctionne également

max-width:someValue;
word-wrap:break-word

Si vous voulez corriger la colonne, vous devez définir la largeur. Par exemple:

<td style="width:100px;">some data</td>


td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}




html