div table

最新推荐文章于 2024-05-21 18:11:13 发布
最新推荐文章于 2024-05-21 18:11:13 发布
阅读量273 收藏
点赞数
分类专栏： css/html 文章标签： div table class header xhtml html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lorgine_china/article/details/4333369
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.tableDiv{margin:0;
padding:0;
border-width:1px;
border-style:solid;
border-color:#00FFCC;
width:400px;
}

.header {
border-width:0px;
}
.item{
border-width:0px;
border-top-width:1px;
border-top-color:#00FFCC;
border-top-style:solid;

}
.left1{
float:left;
width:150px;
}
.right1{
border-left-width:1px;
border-left-style:solid;
border-left-color:#00FFCC;
margin-left:150px;
min-height:100px;

}

.left2{
border-right-width:1px;
border-right-style:solid;
border-right-color:#00FFCC;
margin-right:150px;
}
.right2{
min-height:150px;
float:right;

}


.equal {
  display:table;
  border-collapse:separate;
 }
 .row {
  display:table-row;
 }
 .row div {
  display:table-cell;
 }
 .row .one {
  width:200px;
 }
 .row .two {
  width:200px;
 }
 .row .three {
 
 }
</style>
</head>

<body>
<div class="tableDiv">
 <div class="header">
  <div class="left1">5</div>
  <div class="right1">6<br/><br/><br/>66</div>
 </div>
 <div class="item">
  <div class="left1">1</div>
  <div class="right1">2<br/><br/><br/>22</div>
 </div>
 <div class="item">
  <div class="left1">3</div>
  <div class="right1">4<br/><br/><br/><br/><br/>4444</div>
 </div>
</div>
<br/>
<br/>
<div class="tableDiv">
 <div class="header">
  <div class="right2">56</div>
  <div class="left2">6<br/><br/><br/>66</div>
 </div>
 <div class="item">
  <div class="right2">16</div>
  <div class="left2">2<br/><br/><br/>22</div>
 </div>
 <div class="item">
  <div class="right2">36</div>
  <div class="left2">4<br/><br/><br/><br/><br/>4444</div>
 </div>
</div>


<br/>
<br/>


<div style="display:table;border-collapse:collapse;">
 <div  style="display:table-row">
   <div  style="display:table-cell; width:100px; border-width:1px; border-style:solid; border-color:#00CCFF">
    1111<br/>1111<br/>1111<br/>
   </div>
   <div style="display:table-cell; width:100px; border-width:1px; border-style:solid; border-color:#00CCFF">
    2222
   </div>
   <div style="display:table-cell; width:100px; border-width:1px; border-style:solid; border-color:#00CCFF">
    3333
   </div>
 </div>
 
 <div  style="display:table-row">
   <div  style="display:table-cell; width:100px; border-width:1px; border-style:solid; border-color:#00CCFF">
    1111
   </div>
   <div style="display:table-cell; width:100px; border-width:1px; border-style:solid; border-color:#00CCFF">
    2222
   </div>
   <div style="display:table-cell; width:100px; border-width:1px; border-style:solid; border-color:#00CCFF">
    3333
   </div>
 </div>
</div>
</body>
</html>

lorgine_china
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div table td布局相关属性设置说明
小耿的博客
05-12 6118
转件类型： 常规转件        任务指派 说明：div------------布局了宽高背景颜色     table---------布局了padding 四个数字依次代表上右下左间距 cellpadding代表table的行间距，cellspacing代表单元格间距     td---
使用div实现table效果
weixin_30444105的博客
04-05 1520
项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的display:table的DIV，然后在嵌套的表格DIV内部通过控制行列数和行列的高度，实现单元格合并。个人建议全新实现使用<table> HTM...
disabled 整个div table/tr/td的方法
qq_25901375的博客
12-20 4195
disabled 整个table/tr/td的方法 有时候想整个模块disabled （不提交），然而table/tr/td并不支持disabled 属性，以下有个小方法可以实现这个功能，原理是根据className禁用它底下所有子元素。 html代码：重点在 class=&quot;gridtable&quot; JS代码：根据className:“gridtable” 禁用它底下所有input和select标签...
使用原生div制作table表格
兔子的博客
12-02 2104
在移动使用横屏表格功能，横屏后无法实现同向滚动功能，此时使用div制作table，实现容器内的滚动
DIV 嵌套TABlE 设置滚动条
王永胜的专栏
03-02 949
DIV 嵌套TABlE 设置滚动条，显示滚动条
用div来代替table
wsgzjdbb的博客
07-01 2006
用div来代替table概述实战 概述 table是我们日常开发中经常用到的HTML标签，但我们也经常因为table饱受折磨，原生的table的样式丑出天际，第三方框架的样式可能样式是好看点了，但可能并不是我们想要的样子。面对这些情况，我觉得自己用div写去一个table是一个很好的方法，样式全部可按照自己想要的样子调整。 实战 首先贴出全部代码： <!DOCTYPE html> <html> <head lang="zh"> <meta charset="u
如何让div中的table居中
qq_23934571的博客
12-26 2709
有时候在Div中加上 里面的Table是不会居中的我们可以在Table中加上 margin:auto，比如：
前端开发之div实现table表格系列教程一：创建表格
gz_gy的专栏
08-20 1810
查看效果 <style> #table1{ width:613px; } .kui-table { border: 1px dotted #ccc; } .kui-table .kui-td { height:32px; line-height:32px; font-size: 12px; border-color: #ccc; border-style: dotted; border-width: 0 0 1px 1px;
table与div互相嵌套注意
qq_27232885的博客
08-16 2471
table嵌套div时，div必须放到td中，否则达不到预期的效果;但是div嵌套table时，div中写table、tr、td任意一个都可以正常显示。
table 超出 父元素 div
qq_41536505的博客
08-12 2587
table 超出 父元素 div 实际是把表格写在了 redio 里面 问题： table 在 div 里面，想要的效果是如果 table 的内容超出了父元素就显示省略号，再把 table 的宽度设置为100%，但是，最后数据比较长还是超出了父元素 原因： table 是有不一样的默认样式 table-layout 值 描述 auto 默认，列宽由单元格设定 fixed 列宽由表格宽度或列宽自己设定 inherit 继承，从父元素继承table-layout的值 解决方案：
浅谈 div 与 table 如何取舍结合利用
09-22
和webpage打交道起页面布局就一直是我关注的内容，从早期table构架页面到DIV再到DIV＋Table，可以说我们的需求一直在变，但是目的一直没有改变。
divTable:强大的基于 Div 的 javascript 表
07-10
link rel =" stylesheet " type =" text/css " href =" css/divTable.css "/> < script type =" text/javascript " src =" js/divTable.js " > </ script > ##2。 定义表和列的大小 # tableTest {...
div table的使用
02-17
在服务器端生成的table写到页面的一个Div中去：通过存储过程来实现 存储过程
div与table的区别
07-22
讲述div与table在设置边框时的区别
html中Div与table的区别(各方面细节探讨)
09-22
Div与table的区别表现在的方面很多比如：速度和加载方式方面的区别、在网页应用中的差别、DIV与Table布局在大型网站的可用性比较等等，感兴趣的朋友可以参考下哈，希望在概念上的理解对大家有所帮助
常见的 HTML 标准
csdn_ad986ad的博客
04-30 878
HTML（Hypertext Markup Language）有多个版本和标准。
破解ReadOnly: 如何在HTML中灵活处理不可编辑字段
m0_57021623的博客
05-16 658
对于服务器端处理关键字段，如价格或折扣率，最佳实践是在服务器端重新计算这些值或从可信源（例如数据库）验证这些值，以确保数据的完整性和正确性。是HTML中用于表单输入字段的一个属性，它的目的是阻止用户修改输入字段的值，但允许用户提交表单时包含这些值。方法来修改页面元素的属性，提供了更多的灵活性和控制能力，特别是在处理那些通过HTML属性强制施加的限制时。，通常有其背后的理由，比如保护数据的完整性。对于一些关键字段，如价格、折扣率等，服务器端可以在每次处理前都重新计算或验证这些数据，而不是依赖前端提交的值。
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 328
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 135
HTML,CSS,JavaScript,DOM的理解
python selium div table tbody tr td
08-09
table = driver.find_element_by_xpath("//div//table[1]") ``` 接下来，可以继续使用 `find_element_by_xpath` 方法来定位 tbody、tr 和 td 元素。 如果要找到 tbody 元素，可以使用以下代码： ```python tbody =...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值