Fatal编程技术网
  • html/
  • Html 表出div

Html 表出div

html css

Html 表出div,html,css,html-table,Html,Css,Html Table,我的SpringMVC应用程序在布局上有问题。在我的应用程序中，在div中包含的表甚至超出了它，我为这个div设置了一个宽度参数。我尝试了许多解决方案，我在谷歌上搜索过，但没有成功。这是我应用程序中的jsp文件、CSS文件和屏幕。正如您所看到的，当表格中的文本很长时，它不会换行（正如我所希望的） CSS文件： th,td { border-style: solid; border-width: 5px; border-color: #BCBCBC; } #al

我的SpringMVC应用程序在布局上有问题。在我的应用程序中，在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>


你所有的笔记：
票据日期
描述
${note.date}${note.time}
${note.description}
下面是屏幕：

< P>这是因为你有1个字，大约是100个字符长，试着在中间放一个空格，它应该自己修复。

< P >答案是正确的，但也许你的意思是别的。您可以在该表上使用overflow:auto，还可以指定宽度，如果内容超出表外，它将创建滚动条

还有overflow-x和overflow-y来指定哪个轴。

您需要做两件事来防止表格变得太大

1） 将
表格布局
设置为
固定
：

table {
    table-layout: fixed;
    width: 100%;   
}
2） 将td/th的
wrap
设置为
break word

th,td {
    border-style: solid;
    border-width: 5px;
    border-color: #BCBCBC;
    word-wrap: break-word;
}
您可以在这里看到一个工作示例：

设置
max width
以及
word wrap

有时会在Div中添加一个表。
在我的例子中，我为

赋予了padding right:0px，我也面临着这个问题，在css中添加了这个类并修复了它 桌子{ 左边距：0
}这是一个老问题，但我有一个更简单的方法

只需添加以下内容即可：

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

.entry-content table {
    table-layout: unset !important;
}
.entry-content th, .entry-content td {
    word-break: break-word;
    min-width: 50px;
}
如果您的
表格
已设置为
表格布局：固定
，则
th
或
td
的最小宽度将不起作用。删除它就行了

或者，如果找不到
表格布局的旧css，请添加此选项


table {
    table-layout:unset !important;
}


如果希望代码仅在所需页面上工作，请确保在表前提供额外的类/id

示例：


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



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



希望它能帮助你们所有人。祝你好运
 我得到了一个简单的解决方案，希望有一天能对别人有所帮助

任何从其容器中流出的表，只需使用
div
标记和
style=“overflow:scroll”



.
.
.



你准备好出发了。再见
 表格中的某些单元格值超出了表格

在尝试上述多个选项后，将表格宽度减少到90%解决了问题。


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



如果是长文本字符串，如url，则可以使用：


word-wrap: break-word;


这将在列的末尾中断“包装”文本，而不是像中断word那样没有空格（例如长url）就无法开箱操作

并加上：


overflow-y:hidden;



这将防止溢出的文本与下一行重叠
我相信问题与如何处理长字符串有关。我不认为简单地添加一个空格是一个合适的解决方案。是的，添加空格是可行的，但正如Axel所说，在这种情况下，这不是一个好的解决方案。我使用的是eclispe，我没有“换行符”，只有“字间距”。无论如何，我试着添加“word wrap”，但没有添加success@caro-我已经更新了我的答案。您的表似乎超出了#tablediv的范围。您需要将其设置为固定的表格布局。还要确保包含尽可能多的tds。我注意到你有3列td，只有2列。这些匹配很重要。好的，但正如你们所看到的，我想在td中制作单选按钮，而不是这个专栏。谢谢你的回答，如果我有类似的问题，我会尝试这个解决方案。但现在对我来说，@fredsbend解决方案已经足够了。这是一张你正在处理的桌子。不能正确地使行的列数大于标题数。这没有道理。行列与标题列不匹配是不正确的标记。我只是想让您知道，这样您就可以生成正确的代码。是的，溢出是有效的，我认为这是处理长字符串的最佳解决方案：）非常感谢：）