CODEWITHSUNDEEP
htmlcsshtml-table
caro
caro

Reputation: 411

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/

Upvotes: 24

Views: 80994

Answers (11)

alex
alex

Reputation: 957

I'm posting my solution, after failing with all others.

The table to scroll should be inside a div, with position: relative on the div.

The table has width: 100%; height: 100%;.

The thead of the table should have inset-block-start: 0; position: sticky;.

The tfoot of the table should have inset-block-end: 0; position: sticky;.

The td and th in thead and tfoot should have opacity: 1; background-color: your-choice.

Upvotes: 0

Nikhil Zurunge
Nikhil Zurunge

Reputation: 766

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:auto"

<div style="overflow:auto">
<table>
.
.
.
</table>
</div>

Upvotes: 27

Mikael Puusaari
Mikael Puusaari

Reputation: 1054

If it is long strings of text, like a URL, you can use:

word-wrap: break-word;

this will break the text "wrapped" at the end of the column instead of like break-word which doesn't work out of the box without spaces (e.g long url's)

and add:

overflow-y:hidden;

this will prevent the overflowing text from overlapping the next row

Upvotes: 1

Arun Kumar
Arun Kumar

Reputation: 9

Some of the cell values which are part of the table go out of the table.

After trying multiple options given above, reducing the table width to 90% solved the issue.

table {
  border-collapse: collapse;
  width: 90%;
}

Upvotes: -1

Digital Fun
Digital Fun

Reputation: 47

This is an old question, but I have a simpler method.

Just add this:

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

the min-width for th or td will not work if your table already set to table-layout:fixed. Just delete it.

or add this if you cannot find old css for table-layout

table {
    table-layout:unset !important;
}

make sure you give an additional class / id before the table if you want the code to work only on the page you want.

Example:

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

Hope it can help all of you. Good luck!

Upvotes: 0

Ashutosh Jha
Ashutosh Jha

Reputation: 16367

I was also facing this issue , added this class in css and fixed table { margin-left:0 }

Upvotes: 0

MD Shahrouq
MD Shahrouq

Reputation: 617

Some times adding a Table inside a Div it happens. In my case i had given padding-right:0px for the <div>

Upvotes: 0

Jonas
Jonas

Reputation: 1069

set max-width along with word-wrap

Upvotes: 0

Axel
Axel

Reputation: 10772

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/

Upvotes: 70

user1934286
user1934286

Reputation: 1762

The answer by hoooman is correct but maybe you mean something else. You can use overflow:auto on that table and also specify a width and it will create scroll bars if the content goes outside of the table.

There is also overflow-x and overflow-y to specify which axis.

Upvotes: 4

hoooman
hoooman

Reputation: 590

That is because you have 1 word that is about 100 character long, try putting a space in the middle of that and it should fix itself.

Upvotes: 0

Related Questions