Стол, выходящий из div

У меня проблема с компоновкой в моем приложении MVC весны. В моем приложении таблица, содержащаяся в div, выходит из нее, даже я установил параметр width для этого div. Я пробовал много решений, которые я искал Google, но безуспешно. Вот мой файл 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/

Ответы

Ответ 1

Вам нужно сделать две вещи, чтобы таблица не стала слишком большой.

1) Установите для параметра table-layout значение fixed:

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

2) Установите word-wrap в break-word для td/th

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

Здесь вы можете увидеть рабочий пример: http://jsfiddle.net/d6WL8/

Ответ 2

Ответ на hoooman правилен, но, возможно, вы имеете в виду что-то еще. Вы можете использовать overflow: auto в этой таблице, а также указать ширину, и она будет создавать полосы прокрутки, если содержимое выходит за пределы таблицы.

Существует также overflow-x и overflow-y для указания какой оси.

Ответ 3

Это потому, что у вас есть 1 слово длиной около 100 символов, попробуйте помещать пробел в середину этого, и он должен исправить себя.

Ответ 4

установите max-width вместе с word-wrap

Ответ 5

Несколько раз добавление таблицы внутри Div происходит. В моем случае я дал padding-right: 0px для <div>

Ответ 6

Я также столкнулся с этой проблемой, добавил этот класс в css и фиксированную таблицу {margin-left: 0}

Ответ 7

Это старый вопрос, но у меня есть более простой метод.

Просто добавьте это:

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

min-ширина для th или td не будет работать, если ваша table уже установлена на table-layout:fixed. Просто удали это.

или добавьте это, если вы не можете найти старый CSS для table-layout

table {
    table-layout:unset !important;
}

убедитесь, что перед таблицей указан дополнительный класс/идентификатор, если вы хотите, чтобы код работал только на той странице, которую вы хотите.

Пример:

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

Надеюсь, что это может помочь всем вам. Удачи!

Ответ 8

У меня есть простое решение, надеюсь, оно может кому-нибудь когда-нибудь помочь.

Любая таблица, которая вытекает из ее контейнера, просто инкапсулирует ее с тегом div с style="overflow:scroll"

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

И ты готов к работе. Прощайте!