在我的表中,我将列中第一个单元格的宽度设置为100px.
但是,当此列中某个单元格中的文本太长时,列的宽度会变得更大100px.我怎么能禁用这个扩展？
自从从TABLE布局切换到DIV布局以来,一个常见的问题仍然存在:
问题:你用动态文本填充你的DIV,并且不可避免地有一个超长的单词延伸到div列的边缘并使你的网站看起来不专业.
RETRO-WHINING:表格布局从未发生过这种情况.表格单元格总是很好地扩展到最长单词的宽度.
严重性:即使是最主要的网站,我也会看到这个问题,特别是在德国网站上,即使是"速度限制"等常用词也很长("Geschwindigkeitsbegrenzung").
有没有人有这个可行的解决方案？
可能重复:
在html表中自动换行
此文字的行为与Google Chrome(和其他现代浏览器)完全一样:
<div style="border: 1px solid black; width:100%; word-wrap: break-word;">
<p>
aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</p>
</div>
当浏览器足够宽时,+和b +在同一行.
aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
缩小浏览器范围时,+和b +放在不同的行上.
aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
当b +不再适合时,它会断开并放在两条线上(总共三条线).
aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbb
这一切都很棒.
然而,在我的情况下,这不是一个,div而是table如此:
<table style="border:1px solid black; width:100%; word-wrap:break-word;">
<tr>
<td>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</p>
</td>
</tr>
</table>
在这种情况下,#1和#2会发生,但不会发生#3.也就是说,表格在步骤2之后停止缩小,并且不会发生步骤3.破解词似乎没有过滤掉.
有谁知道make#3是如何发生的？该解决方案只需要在Chrome中运行,但它也适用于其他更好的浏览器.
PS"不要使用表格"没有帮助.
我有一个包含各种长度文本的单元格的表格.所有表格单元的宽度必须相同.如果这意味着截断长词或强制中断长词,那就没关系.
我无法弄清楚如何让这个工作.
这适用于内部客户端应用程序,因此只需要在IE6和IE7中工作.
下面是一个示例页面.包含的细胞onereallylongword是令人讨厌的细胞.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
td { width: 30px; }
</style>
</head>
<body>
<table border="2">
<tr>
<td>word</td>
<td>two words</td>
<td>onereallylongword</td>
</tr>
</table>
</body>
</html>
我有以下DataTable(全宽css类设置宽度= 100%)
<table class="datatable full-width">
<thead>
<th>LOB</th>
<th>Creditor Line 1</th>
<th>Creditor Line 2</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th></th>
</thead>
<tbody>
...
</tbody>
</table>
使用Javascript:
var profileTable =
$(".datatable").dataTable({
"iDisplayLength": 25,
"bDestroy": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false
});
一切都工作正常,直到有一个长文本字符串的记录...当一个记录显示非常长的文本时,数据表溢出在页面右侧.(见下面的截图,红线是页面应该结束的地方) http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg
有人能告诉我如何将文本包装在单元格中或防止出现溢出问题？
我试过'table-layout:fixed'...这可以防止溢出但是将所有列设置为相同的宽度.
谢谢
我正在用html生成应用程序日志,我偶然发现了一个相当恼人的问题.我有以下布局:
| Action | Result | File path |
例如
| Copy | Success | C:\VeryVeryVeryLongF |
| | | ileName.txt |
第1列和第2列仅显示短标签:其内容应保留在一行中.另一方面,第3列可能包含非常长的文件路径,如果它们不能适合单行,则应该跨越多行.
为了达到这个目的,我已经white-space: nowrap;在第一列和white-space: normal; word-break: break-all;最后一列使用了.此外,该表有width:100%.
这在Chrome和IE中很有用,但在Firefox中却不行:简而言之,我似乎无法找到一种方法来告诉Firefox 8.0不要放大表格的最后一列,而是让文本跨越多行.在我之前的例子中,Firefox打印
| Copy | Success | C:\VeryVeryVeryLongFileName.txt |
前两列中的文本可能会有所不同,因此我无法手动设置其宽度并使用table-layout: fixed.我也试过max-width在桌子上设置,并将其包装成一个div,但无济于事.
请参阅http://jsfiddle.net/GQsFx/6/获取真实示例=)如何让Firefox像Chrome一样？
我有一个背景包含一个表格的div.我希望div具有100%的宽度,除非它比表长的窄.我可以这样做:
.my-div {
width:100%;
min-width:900px;
}
这对于900px宽的表来说非常棒,但是如果它比那个窄,我会有不需要的滚动条,如果它比那更宽,我会有无法访问的内容.显然,这可以通过JavaScript轻松解决,但我想知道是否有一个只有CSS的解决方案,所以我的应用程序不是那么JS重.
有关正在发生的事情的视觉效果,请参见此处.我想要的是绿色背景在表格中的文本时溢出视口.
我有一个长逗号分隔的字符串,我正在尝试使用css样式的word-wrap:break word但它似乎不适用于没有空格的字符串.这是预期的吗？
我的表看起来像这样:
<table class="table table-striped" style="margin-top:20px;background-color:#f2f2f2;">
<tbody>
<tr>
<td width="150px" valign="top" style="white-space:nowrap;"><b>Favorite Activities:</b></td>
<td width="50px" style="word-wrap:break-word;">some,really,really,long,long,string,with,out,any,spaces,just,a,comma,delimited,list</td>
</tr>
</tbody>
</table>
这有什么工作吗？
我有这样一张桌子:
<table id="myTable" width="100%" border="5" style="table-layout:fixed">
<tr>
<td><img src="photo1"></td>
<td><img src="photo2"></td>
<td><img src="photo3"></td>
<td><img src="photo4"></td>
<td><img src="photo5"></td>
<td><img src="photo6"></td>
</tr>
</table>
如果用户的屏幕宽度很小,我需要包装列.我需要包装列并获得如下表格结果:
我添加了style ="table-layout:fixed"但是这使得表格宽度恰好为100%,但是图像会自动拉伸到一半以适应屏幕宽度.
如何将列发送到下一行？
css ×10
html ×8
html-table ×3
css-tables ×2
column-width ×1
datatables ×1
firefox ×1
jquery ×1
layout ×1
responsive ×1
scrollbar ×1
width ×1
word-wrap ×1