用div+css实现table

最新推荐文章于 2024-05-06 15:56:52 发布
最新推荐文章于 2024-05-06 15:56:52 发布
阅读量254 收藏
点赞数
分类专栏： CSS 文章标签： CSS HTML
实现table不难， 难点在于border。
如何保证每一行中的每一个div的border连起来。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Embedded div</title>
        <style type="text/css">
            body {
                padding: 10px;
                margin: 10px;
            }

            .table {
                overflow: hidden;
                border-color: green;
                border-style: solid;
                border-width: 1px 0px 0px 1px;
                width: 606px;
            }

            .tr {
                overflow: hidden;
                _zoom: 1;
	        border-bottom: green solid 1px;		
            }

            .td {
                width: 100px;
				overflow: hidden;
                float: left;
                border-color: green;
                border-style: solid;
                border-width: 0px 1px 0px 0px;
                text-align: center;
		padding-top: 5px;
		padding-bottom: 5005px;
		margin-bottom: -5000px;	
            }

            .td input, .td select {
                width: 96px !important;
                width: 94px;				
                *vertical-align: middle;
            }      

        </style>
    </head>
    <body>
        <div class="table">
            <div class="tr">
                <div class="td">
                    <input type="text" value="China"/>
                </div>
                <div class="td">
                    <input type="radio" value="China" />
                </div>
                <div class="td">
                    <select>
                        <option>China</option>
                        <option>Japan</option>
                    </select>
                </div>
                <div class="td">
                    China China China China China China China China China China China
                </div>
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
            </div>
            <div class="tr">
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
            </div>
            <div class="tr">
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
            </div>
            <div class="tr">
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
                <div class="td">
                    China
                </div>
            </div>
        </div>
    </body>
</html>
johnyellow
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Div+CSS对HTML的table表格定位用法实例
01-19
关于css定位有很多文章讲述： 如果有一个元素div ，他的position属性设置为absolute，那么这个div 的位置取决于其父元素中position值设置为relative的元素。如果在其父元素中没有一个元素的position值是relative、absolute、或者fixed，那么这个div位置将以 body位置为参考。 但是对于某些浏览器来说似乎不是每个元素都遵从这一规则，有如下一段代码 CSS Code复制内容到剪贴板 table{          margin-left: 100px;          margin-top: 50px;     
div+css table布局实现代码
01-21
但是你又不喜欢用table来实现他，那怎么办呢？实现的方法很多，有根据视觉错觉实现的，有用JS控制使高度相等的，还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。 其实有...
css+div 布局（1）- css+div实现table布局
diansunyu4787的博客
04-12 178
css+div实现table布局 css代码 <style> .table/**//*divtablecontainer*/ { /**//*width:770px;*/ } .rowdiv/**//*divrowcell*/ { display:inline; width:240px; border-top:1pxsol...
div+css布局与Table布局
最新发布
m0_71233415的博客
05-06 312
div+css布局与Table布局对比
div+css实现table布局
aimcode
03-09 2229
div+css实现table布局　下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧　　许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。　　但是你又不喜欢用table来实现他，那怎么办呢？实现的方法很多，
详解DIV+CSS与表格建站的区别
leo_net的专栏
04-13 563
       现在全国大大小小的网站都在搞一场技术“革命”，就是所谓“网站重构”说简单点就是DIV+CSS进行网站制作。用DIV+CSS代替传统的Table制作框架和美化页面。百度搜索优化　　在重构之前，肯定要了解为什么重构，为什么要用DIV+CSS技术?了解了这个问题，那么大家才有使用此技术重构网站的动力。各大CSS学习网站和教程无一例外都会列举出以下使用DIV+CSS的好处：　　1、内容和形式
div+css实现两列table效果示例
12-13
在网页设计中，使用`div`和`css`布局是一种常见的方法，它可以实现灵活多样的网页结构。在本示例中，我们看到如何利用这些技术创建一个两列的表格效果。这种效果通常用于构建信息输入表单或者数据展示区域。 首先，...
DIV+CSS 网页布局心得
12-03
如果你之前习惯于使用TABLE进行布局，那么在学习DIV+CSS时，你需要抛弃以往依赖表格的思维模式。TABLE布局虽然快速，但不利于页面的灵活性和可扩展性。而DIV+CSS则更适合初学者，因为它的逻辑清晰，易于理解。 其次...
用div+css实现table效果
温海波的专栏
03-27 878
            ul        {            list-style: none;            margin: 0;        }        li        {            float: left;            padding: 5px;            text-align: left;            border-t
table转div、table转css
03-24
ps切出来的table，直接转div，转css超级方便的一款工具。
CSS div+CSS实现表格.html
热门推荐
weixin_42193179的博客
12-14 1万+
序号姓名年龄序号姓名年龄
css用div实现table效果
honey_seve7n的博客
10-11 1255
最近项目需要实现类似table样式，使用div实现了如上图的效果： html代码如下 <div class="table-wrapper"> <div class="table-item"> <span class="table-title">能量(kcal)</span> <span class...
div+css布局与table布局比较
40128682的博客
05-06 6705
div+css布局与table布局比较 一、背景介绍 table布局是网页早期布局实现的主要手段，当时的网页构成，相对也比较简单，多是以文本 以及静态图片等组成的，类似于报纸的形式，分区分块显示，table标签的结构表现恰好可以 满足这样的要求。但是随着网页要求的提高和技术的不断探索更迭，尤其是W3C（万维网联 盟）及其他标准组织制定的标准出台后，明确了table标签不是布局工具，使table标签...
table 和 div+css 的区别
qq_44716411的博客
08-21 114
table 和 div+css 的区别 ==table：==加载方式是完成后加载，遇到 后，在读到 之前， 中的内容不加载；布局受到限制。div：：加载方式是即读即加载，遇到 没有遇到 的时候一样加载 中的内容，读多少加载多少；布局更加灵活。 ...
DIV+CSS写的表格(Table)
07-09 992
话不多说，直接上代码！ <style> .table-h{width: 100%; height: auto;} .table-h li{width: 100%;clear: both; display:inline-block;} .table-h .div_li {float: left;height: 40px; line-height: 40px;border-bottom: 1px solid #eaeaea; text-align: center;overflow: hidden
DIV+CSS PK TABLE+CSS
网站开发初中级代码参考-转载
05-19 154
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/mayongzhan - 马永占,myz,mayongzhan DIV+CSS PK TABLE+CSS 最近DD鱼发过来的网站.发现都是div,还以为是偶然,今天去搜proxy的时候发现,满大街都是div+CSS.尤其是还有个贴把经典十个...
DIV+CSS布局和TABLE布局详解
iteye_16353的博客
07-21 306
[align=center]DIV+CSS布局和TABLE布局详解[/align] [b]1.1 TABLE布局 1.1.1概述[/b] HTML table元素渲染到网页上，其单元格的边框和间距均为0。传统TABLE布局方式就是利用table元素的这个特性，将网页中的各个元素按版式划分放入表格的各个单元格中，从而实现复杂的排版组合。 table布局的核心在...
div+css的布局较table布局有什么优点
06-06
使用div+CSS布局较table布局的优点有几个： 1. 效率更高：使用div+CSS布局，浏览器渲染页面的速度更快，因为CSS文件和HTML文件分离，可以减少页面的代码量，从而提高页面加载速度。 2. 样式更灵活：使用div+CSS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值