表格走出div

我在彈簧mvc應用程序的佈局中遇到問題。在我的應用程序中，包含div的表格即使我爲此div設置了一個寬度參數。我嘗試了許多解決方案，但我沒有成功。這是我的jsp文件，css文件和來自我的應用程序的屏幕。正如你所看到的，當表格中的文字很長時，它不會中斷（如我所願）。表格走出div

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/

感謝您的幫助。

來源

2013-01-22 caro

這是因爲你有一個長度大約爲100個字符的單詞，試着在它的中間放一個空格，它應該修復它自己。

來源

2013-01-22 19:42:07 hoooman

我相信這個問題是關於如何處理長字符串。我不認爲簡單地增加一個空間是一個適當的解決方案。 – Axel

是的，增加空間是可行的，但像Axel說的那樣，在這種情況下這不是一個好的解決方案。 – caro

hoooman的回答是正確的，但也許你的意思是別的。您可以在該表上使用overflow：auto並指定寬度，如果內容超出表格範圍，它將創建滾動條。

還有overflow-x和overflow-y來指定哪個軸。

來源

2013-01-22 19:45:15 fredsbend

是的，溢出的作品，我認爲這是長字符串的最佳解決方案:)非常感謝:) – caro

@caro很高興幫助。 – fredsbend

您需要做兩件事來防止表變得太大。

1）將table-layout到fixed：

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

2）設置word-wrap到break-word爲TD /日

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

這裏你可以看到一個工作示例：http://jsfiddle.net/d6WL8/

來源

2013-01-22 19:47:35 Axel

我正在使用eclispe，而我沒有「文字包裝」只有「文字間距」。無論如何，我試圖添加「自動換行」，但沒有成功 – caro

@caro - 我已經更新了我的答案。似乎你的表正在擴展超出#tablediv的界限。您需要將其設置爲固定的表格佈局。 – Axel

另外請確保你包含儘可能多的ths你有tds。我注意到你有3列td，只有2列。這些匹配很重要。 – Axel

集max-width連同word-wrap

來源

2017-08-04 13:18:36 Jonas

有時候會在Div內添加一個表。在我的情況下，我給了填充右：0px爲<div>

來源

2018-03-06 11:12:23

回答

相關問題