Q:

Table going out of div

I have a problem in layout in my spring MVC application. In my app, table which is containing in div going out of it even I set a width parameter for this div. I tried many solutions which I googled but without success. Here is my jsp file, CSS file, and screen from my app. As you can see when text in table is long it's not break to new line (as I want).
CSS file:
    th,td {
    border-style: solid;
    border-width: 5px;
    border-color: #BCBCBC;
}

#all {
    width: 500px;
}

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

jsp file:
    <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>

And here is screen:
http://imageshack.us/photo/my-images/203/tableproblem.png/

A:

You'll need to do two things to prevent the table from becoming too large.
1) Set the table-layout to fixed:
table {
    table-layout: fixed;
    width: 100%;   
}

2)  Set word-wrap to break-word for td/th
th,td {
    border-style: solid;
    border-width: 5px;
    border-color: #BCBCBC;
    word-wrap: break-word;
}

You can see a working example here: http://jsfiddle.net/d6WL8/

A:

I got a simple solution, hope it may help somebody someday.
Any table  which is flowing out of its container, just encapsulate it with a div tag with style="overflow:scroll"
<div style="overflow:scroll">
<table>
.
.
.
</table>
</div>

And you are ready to go. Adios!

