用CSS怎么把表格显示出来

html-css021

用CSS怎么把表格显示出来,第1张

CSS中显示和隐藏有多种方法，比较常见的是有display:none|blockvisibility: hidden|visible他们的区别在于，对文档流影响的区别。一般大家显示隐藏元素，比较倾向于用display。

你如果想隐藏表格，可以用table{display:none}来操作。想显示的话把display:block即可。

一般用position属性来定义位置。

relative相对位置；

absolute绝对位置；

fixed屏幕位置；

通过left、top、bottom、right设置。

可以使用以下几种方式：

1、相对定位方式，设置图片的position属性为relative，然后设置left top属性为负数，做到显示中间区域，外层标签要设置overflow属性为hidden不然会撑大。

2、把图片当做背景使用，然后设置背景居中或者手工填写位置。

3、使用图片margin属性，外层标签要设置overflow属性为hidden不然会撑大。

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

    <title>图片</title>

<style>

.div1{

    width:300px

    height:400px

    border:1px solid #4EC83B

    overflow: hidden

}

.div1 img {

    position: relative

    left: -100px

    top: -150px

}

</style>

</head>

<body>

<div style="float:leftmargin:10px">

    第一种

    <div class="div1">

        <img src="img1.jpg" width="500" height="700" alt="" />

    </div>

</div>

<div style="float:leftmargin:10px">

    第二种

    <div style="width:300pxheight:400pxbackground-image:url(img1.jpg)background-repeat: no-repeatbackground-position:center centerborder:1px solid #4EC83B">

    </div>

</div>

<div style="float:leftmargin:10px">

    第三种

    <div style="width:300pxheight:400pxborder:1px solid #4EC83B overflow: hidden">

        <img src="img1.jpg" width="500" height="700" style="margin:-150px -100px" />

    </div>

</div>

</body>

</html>

效果如下：