gpt4 book ai didi

html - 表格超出 div

转载 作者:技术小花猫 更新时间:2023-10-29 12:22:30 25 4
gpt4 key购买 nike

我的 spring MVC 应用程序中的布局有问题。在我的应用程序中,即使我为此 div 设置了一个宽度参数,也包含在 div 中的表格。我尝试了很多我用谷歌搜索但没有成功的解决方案。这是我的应用程序中的 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) 将table-layout设置为fixed:

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

2) 将word-wrap设置为break-word for td/th

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

您可以在此处查看工作示例:http://jsfiddle.net/d6WL8/

关于html - 表格超出 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14466528/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com