2013-01-22 8 views
10

Tôi gặp sự cố trong bố cục trong ứng dụng mvc mùa xuân của mình. Trong ứng dụng của tôi, bảng có chứa trong div đi ra khỏi nó ngay cả khi tôi đặt một tham số chiều rộng cho div này. Tôi đã thử nhiều giải pháp mà tôi googled nhưng không thành công. Đây là tệp jsp của tôi, tệp css và màn hình từ ứng dụng của tôi. Như bạn có thể thấy khi văn bản trong bảng dài nó không phá vỡ dòng mới (như tôi muốn).Bảng đi ra khỏi div

css tập tin

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


#all { 
    width: 500px; 
} 

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

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

Và đây là màn hình:

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

Cám ơn trước sự giúp đỡ của bạn.

Trả lời

0

Đó là vì bạn có 1 từ dài khoảng 100 ký tự, hãy thử đặt một khoảng trống ở giữa đó và nó sẽ tự sửa.

+0

Tôi tin rằng câu hỏi liên quan đến cách xử lý chuỗi dài. Tôi không nghĩ đơn giản là thêm một không gian là một giải pháp thích hợp. – Axel

+0

Có, thêm không gian đang làm việc, nhưng như Axel nói, nó không phải là giải pháp tốt trong trường hợp này. – caro

1

Câu trả lời của hoooman là chính xác nhưng có thể bạn có ý nghĩa gì đó khác. Bạn có thể sử dụng tràn: tự động trên bảng đó và cũng chỉ định chiều rộng và nó sẽ tạo ra các thanh cuộn nếu nội dung nằm ngoài bảng.

Cũng có tràn-x và tràn-y để chỉ định trục nào.

+0

Vâng, công việc tràn, và tôi nghĩ đây là giải pháp tốt nhất cho chuỗi dài :) Cảm ơn bạn rất nhiều :) – caro

+0

@caro Rất vui được giúp đỡ. – fredsbend

29

Bạn sẽ cần phải làm hai việc để ngăn bảng trở nên quá lớn.

1) Đặt table-layout-fixed:

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

2) Đặt word-wrap-break-word cho td/th

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

Bạn có thể thấy một ví dụ làm việc ở đây: http://jsfiddle.net/d6WL8/

+0

Tôi đang sử dụng eclispe và tôi không có "word-wrap" chỉ "word-spacing". Dù sao tôi đã cố gắng thêm "từ bọc" nhưng không thành công – caro

+0

@caro - Tôi đã cập nhật câu trả lời của mình. Có vẻ như bàn của bạn đang mở rộng ra ngoài giới hạn của #tablediv. Bạn cần đặt nó thành bố cục bảng cố định. – Axel

+0

Ngoài ra hãy chắc chắn rằng bạn bao gồm nhiều thứ như bạn có tds. Tôi nhận thấy bạn có 3 cột của td và chỉ có 2 của. Điều quan trọng là những trận đấu này. – Axel

0

bộ max-width cùng với word-wrap

0

Một số lần thêm Bảng trong Div sẽ xảy ra. Trong trường hợp của tôi, tôi đã đưa padding-right: 0px cho <div>