css+div table

div+css table表格样式

<!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=utf-8" />
<title>table</title>
<style type="text/css">
.table{
    width:400px;
    font-size:14px;
    font-family:"迷你简黑体";
}
.tr{
    width:33.3%;
    float:left;
}
.td{border:#969 solid 1px;}
.td2{
    border:#969 solid 1px;
    text-align:right;
}
</style>

</head>

<body>
<div class="table">
    <div class="tr">

        <div class="td">消费项目</div>
        <div class="td">周一</div>
        <div class="td">周二</div>
    </div>
    <div class="tr">
        <div class="td2">衣服</div>
        <div class="td2">241</div>
        <div class="td2">150</div>
    </div>
    <div class="tr">
        <div class="td2">化妆品</div>
        <div class="td2">30</div>
        <div class="td2">14</div>
    </div>
</div>     

</body>
</html>
时间: 2024-10-17 23:09:40

css+div table的相关文章

用DIV+css写Table

做出的效果样式如下图, 1,首先考虑的是如何显示border,就像是分割代码,我把border分割为最外层DIV全border,和内层DIV的right和bottom的border,就是右边和下边. 2,考虑DIV的布局,内层DIVfloat:left,设定每个DIV的宽度和高度,就可以达到想要的效果,外层DIV由于内层漂浮也需要float:left 3,给需要不同高度和宽度的DIV加上不懂的class 代码如下. <!DOCTYPE html PUBLIC "-//W3C//DTD XH

20151008-20151101学习内容之三:css+div

css+div 超链接: <a hert = " " target(超链接的打开方式) = "self(自身)"或"new(新开窗体)"> </a> 锚点:超链接的特殊应用 <a href="#1"...> </a> <a name ="1"> </a> 表格:容器,可以把这一个页面划分区域表格不能随便移动 div: 层标签 (默认占一

CSS+DIV+HTML(一)--HTML总结

一.定义 HTML(Hyper Text Markup Language),标记语言. 二.主要内容: HTML元素分为三类:块级标签.内联标签.可变标签.区别在于: 块级元素:在默认情况下会换行显示. 内联元素:在默认情况下会在一行内显示. 可变元素:根据上下文确定自己是块级元素还是内联元素. HTML文档和HTML元素是通过HTML标签进行标记的.HTML元素定义了整个HTML文档.什么意思呢? 举个例子: HTML文档是有文本标签定义的: <!DOCTYPE html> <html

使用css固定table第一列

.table{width:100%;overflow-x: scroll;background-color:#7c95b5;} .fixedTable{width:160%;text-align: center;color:#fff;font-size:14px; border-collapse:collapse;} .fixedTable tr{line-height: 30px;border:1px solid #fff;} .fixedTable tr:first-child{height

CSS 控制table 滑动及调整列宽等问题总结

一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的height高度.然后设置overflow-y:scroll.这样当内容高度超过了height设定的高度,就会出现滚动条 css: .scroll_y{ max-height: 200px; /* 宽度大概比表头宽17px,具体值实际调试 */ width:531px; overflow-y: scrol

打败 IE 的葵花宝典:CSS Bug Table

http://blog.alipay.com/2308.html 作为一名前端,我们通常要做的就是让页面在各系统A-Grade浏览器,甚至网站浏览份额0.1%以上的浏览器上良好显示.当然,还有性能问题.不过,今天要说的是样式的兼容问题.在IE/Mozilla/Webkit/Opera四分天下的今天,IE6-9/Mozilla(Gecko)系列/Chrome/Safari/Opera etc. 这些浏览器的兼容,无不让前端们头痛.而在这之中,最让人头痛的当数IE,特别是IE6.搞定了IE6,基本也

精通CSS+DIV网页样式与布局--图片效果

提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:     精通CSS+DIV网页样式与布局--初探CSS 精通CSS+DIV网页样式与布局--CSS文字效果 精通CSS

CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成前台网页制作.小强老师是这样分类的,前几次课,我们将CSS+DIV入门基础,后几天课程我们讲案例制作.咱们接下来讲的是css基础部分. 高清视频地址如下: 01  css语法规范:                       http://www.tudou.com/programs/view/8s

精通CSS+DIV网页样式与布局--初探CSS

CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求."DIV+CSS&q