CSS表格 单元格占两行

html-css028

CSS表格 单元格占两行,第1张

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表格

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

div{

width: 100px

overflow:hidden

text-overflow:ellipsis

display:-webkit-box

-webkit-box-orient:vertical

-webkit-line-clamp:2

}

3、浏览器运行index.html页面，此时文字超过2行会自动把多余部分用省略号显示 。

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。