18

SpringMVCアプリケーションのレイアウトに問題があります。私のアプリでは、このdivの幅パラメーターを設定しても、divに含まれているテーブルが出力されます。私はグーグルで検索した多くの解決策を試しましたが、成功しませんでした。これが私のjspファイル、CSSファイル、および私のアプリの画面です。テーブル内のテキストが長い場合にわかるように、（私が望むように）改行されません。

CSSファイル：

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


#all {
    width: 500px;
}

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

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>

そしてここに画面があります：

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

4

10 に答える 10

58

テーブルが大きくなりすぎないようにするには、2 つのことを行う必要があります。

1) を に設定table-layoutしfixedます。

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

2) td/th にword-wrap設定break-word

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

ここで実際の例を見ることができます: http://jsfiddle.net/d6WL8/

于 2013-01-22T19:47:35.380 に答える
14

私は簡単な解決策を得ました。いつか誰かに役立つことを願っています。

コンテナから流出しているテーブルは、次のdivタグでカプセル化するだけですstyle="overflow:auto"

<div style="overflow:auto">
<table>
.
.
.
</table>
</div>
于 2019-05-28T06:44:20.323 に答える
3

hooman の答えは正しいですが、別のことを言っているのかもしれません。そのテーブルでoverflow:autoを使用し、幅も指定すると、コンテンツがテーブルの外に出た場合にスクロールバーが作成されます。

どの軸を指定するか、overflow-x と overflow-y もあります。

于 2013-01-22T19:45:15.247 に答える
0

これは、約 100 文字の長さの単語が 1 つあるためです。その間にスペースを入れてみると、自動的に修正されるはずです。

于 2013-01-22T19:42:07.363 に答える