html table 列表折行并且高度有最小值

最新推荐文章于 2024-01-11 15:30:40 发布

原创最新推荐文章于 2024-01-11 15:30:40 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #html #border #javascript #scroll #css

web 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种通过设置CSS属性使表格中的内容能够正确折行并保持表格宽度不变的方法。利用table-layout、word-wrap及word-break等属性，解决了表格单元格内容过长导致表格宽度变化的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上大部分资料都是如http://www.itfeed.cn/post.asp?id=3337 所说,就是用word-warp: break-word; word-break: break-all;来控制折行,对与div、p等html元素是有效的，而且也支持FF；但对于表格table就支持的不好了，表格尽管设定了宽度，但还是会根据数据长度的不同而改变。

解决办法（红字、绿色字）：

css ：

.tableBorder1 {

   BORDER-RIGHT: #c6a188 1px solid;

    BORDER: #6b92af 1px solid;

    TABLE-LAYOUT: fixed;

}

.tableBorder1 th{

min-height:30px;

border:1px #6b92af solid;

background:#edf2f6;

font-size:13px;

}

.tableBorder1 td{

min-height:28px;

border:1px #dcdcdc solid;

overflow: hidden;

white-space: normal;

word-warp: break-word;

word-break: break-all;/*Only work in IE*/

text-overflow: ellipsis;/*Not working in FF*/

}

红色字属性解释：TABLE-LAYOUT: fixed;

Syntax

HTML { table-layout : sLayout }
Scripting object.style.tableLayout [ = sLayout ]

Possible Values

sLayout String that specifies or receives one of the following values:
auto Default. Column width is set by the widest unbreakable content in the column cells.
fixed Table and column widths are set either by the sum of the widths on the col objects or, if these are not specified, by the width of the first row of cells. If no width is specified for the table, it renders by default with width=100%.

这个属性有个缺点，那就是在把列宽固定住的情况下把行高也给定死了，如果行字段少的话行高会很小，看着不舒服。
所以我们还要设置下td的最小高度min-height:28px 这样就行了。

绿色字属性部分可参看下面：

HTML	{ table-layout : sLayout }
Scripting	object.style.tableLayout [ = sLayout ]

附：以下是http://www.itfeed.cn/post.asp?id=3337网页内容：

CSS文字折行与省略号

相关的几个属性和w3schools的参考如下：

word-warp 属性设置如何处理单词的折行
http://www.w3schools.com/css3/css3_pr_word-wrap.asp
word-wrap: normal | break-word

word-break 属性设置如何处理单词折断，仅支持IE
http://www.w3schools.com/css3/css3_pr_word-break.asp
word-break: normal | break-all | hyphenate

overflow 属性设置如何处理内容超出元素边框的情况
http://www.w3schools.com/css/pr_pos_overflow.asp
overflow: visible | hidden | scroll | auto | inherit

text-overflow 是一个比较特殊的属性，对于超出元素边框用省略号显示总的来说目前没有完美的css的solution，需要借助javascript的帮助

text-overflow: clip | ellipsis | ellipsis-word
clip : 　不显示省略标记（…），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
ellipsis-word : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。

Opera -o-text-overflow
Firefox3 不支持可以用-moz-bing解决这个问题 (https://developer.mozilla.org/En/CSS/-moz-binding)

<title>文字折行与省略号</title>
<style type="text/css">
p.nowarp {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;/*Not working in FF*/
}
p.warp {
      overflow: hidden;
      white-space: normal;
      word-warp: break-word;
      word-break: break-all;/*Only work in IE*/
      text-overflow: ellipsis;/*Not working in FF*/
}
</style>
</head>

<body>

<div style="width: 300px; border: 1px solid red;">
      <p class="nowarp">
      禁止换行，且用省略号表示超出的部分，哈哈哈哈哈哈哈哈啊哈哈啊哈哈
      </p>
</div>

<div style="width: 300px; border: 1px solid red;">
      <p class="warp">
      自动换行，veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylong
      </p>
</div>
</body>

IE和FF下的显示效果