`
征途2010
  • 浏览: 247994 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

div构建table

阅读更多

1、Css display值与解释-(详细可见CSS手册CSS display手册)参数:
block :块对象的默认值。用该值为对象之后添加新行
none :隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline :内联对象的默认值。用该值将从对象中删除行
compact :分配对象为块对象或基于内容之上的内联对象
marker :指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用
inline-table :将表格显示为无前后换行的内联对象或内联容器
list-item :将块对象指定为列表项目。并可以添加可选项目标志
run-in :分配对象为块对象或基于内容之上的内联对象
table :将对象作为块元素级的表格显示
table-caption :将对象作为表格标题显示
table-cell :将对象作为表格单元格显示
table-column :将对象作为表格列显示
table-column-group :将对象作为表格列组显示
table-header-group :将对象作为表格标题组显示
table-footer-group :将对象作为表格脚注组显示
table-row :将对象作为表格行显示
table-row-group :将对象作为表格行组显示

 

 

2、代码段如下

 

 

#main {
display: table;
border-collapse: collapse;
}

#nav {
display: table-cell;
width: 180px;
background-color: #e7dbcd;
}

#extras {
display: table-cell;
width: 180px;
padding-left: 10px;
border-right: 1px dotted #d7ad7b;
}

#content {
display: table-cell;
width: 380px;
padding-left: 10px;
}
<div id="wrapper">
  <div id="main">
    <div id="nav"> navigation column content…</div>
    <div id="extras"> news headlines column content…</div>
    <div id="content">main article content…</div>
  </div>
</div>
分享到:
评论

相关推荐

    Div仿制table送自定义Scrollbar支持排序

    首先,Div仿制table是通过CSS布局(如Flexbox或Grid)和JavaScript来构建一个看起来和表格类似的结构,这样可以更灵活地控制单元格的样式、行高和列宽,同时还能实现响应式设计。对于不支持这些新特性的老旧浏览器...

    css+div和table+css的比较

    2. **快速原型**:在快速构建页面原型时,table 的布局方式可以快速实现基本的页面结构。 然而,table 的缺点也很明显: 1. **代码复杂**:过度使用 table 布局会导致代码冗余,不易维护。 2. **性能问题**:table...

    表格转换为div(Table2CSS)

    原来的网站是TABLE搭建的,现在选择网页,轻松按下按钮,一个全新的DIV+CSS网页重新构建完成了。 Table2CSS是一款可以将表格布局网页完美转换成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。 这个...

    JQuery 动态生成DIV、Table并处理数据

    标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素,特别是DIV和Table,并且处理其中的数据。这在Web开发中非常常见,尤其是在构建交互式用户界面时。下面将详细阐述这...

    table布局网页转换为div+CSS布局的转换软件

    在网页设计领域,传统的`table`布局曾是构建网页结构的主要方式,但随着Web标准的发展,`div`结合`CSS`布局(层叠样式表)逐渐成为主流。`table`布局虽然简单易用,但在复杂性和可维护性上存在诸多问题,如不易控制...

    jQueryUI拖拽效果_拖拽div的值到table表格里面

    这个功能对于构建交互式、动态的网页界面非常有用,可以提升用户体验,使得数据操作更加直观和便捷。我们将讨论相关的jQuery UI组件、核心的JavaScript代码以及如何与HTML元素交互。 首先,jQuery UI是一个强大的...

    漂亮的网页后台模板(div+css+table)

    在后台模板设计中,`div`通常被用作构建模块化的设计,比如导航栏、侧边栏、内容区等,便于维护和更新。 接下来,我们谈论CSS(Cascading Style Sheets)。CSS是用于控制网页样式的语言,它可以改变HTML元素的外观...

    table转化div软件

    在网页设计领域,传统的HTML布局方式常常使用`&lt;table&gt;`元素来构建页面结构,但随着Web标准的发展,CSS(层叠样式表)和`&lt;div&gt;`元素成为了更现代、更灵活的布局工具。"table转化div软件"就是为了帮助设计师将基于`...

    ASP.NET 企业网站管理系统,Access版,本程序未开源,只适合建站。界面非DIV+CSS,采用老的Table布局,更方便老美工修改程序。

    在界面设计方面,这个系统采用了传统的Table布局而非现代的DIV+CSS方式。Table布局在早期Web开发中非常常见,它便于快速构建网页结构,但对于网页的响应式设计和SEO优化可能不够理想。相比之下,DIV+CSS提供了更好的...

    Table2CSSConverter4.2.4

    原来的网站是TABLE搭建的,现在选择网页,轻松按下按钮,一个全新的DIV+CSS网页重新构建完成了。 Table2CSS是一款可以将表格布局网页完美转换成DIV+CSS方式的软件。支持外部CSS,支持网页及目录批量转换。

    css table 表格标签

    `&lt;table&gt;`标签允许我们构建复杂的表格结构,包括行(`&lt;tr&gt;`)、列(`&lt;th&gt;`或`&lt;td&gt;`)以及表头(`&lt;thead&gt;`)、表体(`&lt;tbody&gt;`)和表脚(`&lt;tfoot&gt;`)。在本教程中,我们将深入探讨如何使用CSS来美化和增强HTML表格的...

    利用层的table-row、table-cell属性进行页面布局

    因此,在现代Web开发中,我们通常推荐使用这些更强大的布局工具来构建更复杂和灵活的页面结构。 在提供的压缩包文件"layout"中,可能包含了使用此方法的示例代码,可以进一步学习和实践这种布局技术。同时,标签...

    详细说明了div怎么在div上实现浮动的代码

    在网页布局设计中,`div`元素是一种非常重要的HTML结构单元,它被广泛用于构建页面的各个部分。本文将深入探讨如何通过CSS样式实现`div`元素的浮动,以达到在另一个`div`上浮动的效果,同时我们也会提及在.NET环境中...

    div+css制作表格

    在网页设计中,使用`div+CSS`来构建表格是一种灵活且响应式的设计方式。这种方式不仅能够帮助我们创建出与传统`&lt;table&gt;`标签相似的布局效果,还能更好地控制表格的样式、布局以及适应不同设备屏幕尺寸的能力。下面将...

    DIV+CSS入门教程

    因此,遵循Web标准的页面应是用XHTML和CSS构建的,而不仅仅是使用DIV元素。 在内容部分,首先解释了为什么国人习惯称这种布局方式为"Div+CSS",是因为过去网页设计中常使用Table布局,而现在更倾向于使用DIV元素,...

    div+css实现两列table效果示例

    这种效果通常用于构建信息输入表单或者数据展示区域。 首先,`div`元素是HTML中的一个块级元素,它允许我们将页面内容进行分组,并可以应用样式来控制其布局。在示例中,`div`被用作一个容器,包含了一组`ul`列表...

    Layui组件Table绑定行点击事件和获取行数据的方法

    var id = JSON.stringify($('#div').find('.layui-table-body').find("table").find("tbody").find(".layui-table-hover").data('index')); // 根据索引从数据集中获取行数据,这里假设数据集存储在res.data对象中...

    HTML—div例子

    HTML中的`&lt;div&gt;`元素是页面布局的基本构建块,它是一个通用容器,用于组合其他HTML元素,以便对网页内容进行组织和样式化。这个“HTML—div例子”可能包含了一个展示如何使用`&lt;div&gt;`元素来创建不同布局的示例。 在...

    表格通过div+css现实对角线列表功能

    在构建对角线列表时,每个单元格将由一个单独的`div`元素表示。 接下来,我们将利用CSS来定义这些`div`元素的样式,以实现对角线的效果。以下是一些关键的CSS属性和技巧: 1. **布局方式**:通常,我们可以使用`...

    DIV+CSS表格代码.rar

    `CSS`表格布局通常会结合使用`display: table`、`display: table-row`、`display: table-cell`等属性,将`DIV`元素模拟为表格元素。 在“DIV+CSS表格代码”中,开发者可能已经展示了如何用`DIV`代替`&lt;table&gt;`标签来...

Global site tag (gtag.js) - Google Analytics