CSS表格单元格占两行可以参考以下的代码:
<!-- 这是占两行的 -->
<table border=1>
<tr><td rowspan="2">单元格占两行的</td><td>......</td></tr>
<tr><td>....</td><tr>
</table>
<!-- 这是占两列的 -->
<table border=1>
<tr><td colspan="2">单元格占两列的</td></tr>
<tr><td>..........</td><td>..........</td><tr>
</table>
扩展资料:
CSS 表格属性
表格边框
如需在 CSS 中设置表格边框,请使用 border 属性。
下面的例子为 table、th 以及 td 设置了蓝色边框:
table, th, td
{
border: 1px solid blue
}
请注意,上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
如果需要把表格显示为单线条边框,请使用 border-collapse 属性。
折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框:
table
{
border-collapse:collapse
}
table,th, td
{
border: 1px solid black
}
参考资料来源:百度百科-CSS表格
“随浏览器的高度变化而变化”有局限性啊~首先:无滚动条的情况,也就是你第二行的内容有限,高度不会超过一屏,这样好解决,只需要用定位就OK了,然后:如果内容多,超过一屏,根本就用不着考虑自适应了,应为会自动自适应的但是:要是这两种情况都满足的CSS,估计没有,你只能考虑用JS了用CSS让文字在一行内显示不换行的方法:
一般的文字截断(适用于内联与块):
.text-overflow{
display:block /*内联对象需加*/
width:31em
word-break:keep-all /* 不换行 */
white-space:nowrap /* 不换行 */
overflow:hidden /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis /*溢出时显示省略标记...;需与overflow:hidden一起使用*/
}
对于表格,定义有点不一样:
table{
width:30em
table-layout:fixed /*只有定义了表格的布局算法为fixed,下面td的定义才能起作用*/
}
td{
width:100%
word-break:keep-all /* 不换行 */
white-space:nowrap /* 不换行 */
overflow:hidden /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis /* 溢出时显示省略标记...;需与overflow:hidden一起使用*/
}
注:这个只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有"...",其它的浏览器文本超出指定宽度时会隐藏。
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。