静态页面表格的布局问题--在表格里不能用float来布局，不然你怎么调都发现没用啊。

静态页面表格的布局问题--在表格里不能用float来布局，不然你怎么调都发现没用啊。今天一直在调一个表格，本来按照表格的布局，那样写是对的。结果我就一直调，就是一个两行两列的表格，很简单的。但是由于我是吧原来的div换成表格布局，结果里面有一些float属性。导致我的表格不能按照预期的显示。

这是我改过之后的布局，可以按照预期的显示。

<table border="1" style="background-color:#F0F8FB;width:745px;float:left;margin-left:15px;margin-top:15px;text-align:left;border-collapse:collapse;line-height:25px;">
<tr>
<td style="width:100px;">
<img src="data:images/face00.jpg" alt="" style="width:48px;height:48px;"/>
</td>
<td style="width:240px;">
<div class="UserInfo">
<span class="Welcome">欢迎您，${session.user.userName}</span>
<span><a>编辑个人资料</a></span>|
<span><a>修改密码</a></span>|
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<table>
<tr>
<td>会员级别:</td>
</tr>
<tr>
<td>账户余额:</td>
</tr>
<tr>
<td>订单提醒:</td>
</tr>
<tr>
<td>普通会员</td>
</tr>
<tr>
<td>¥0.0</td>
</tr>
<tr>
<td><a style="color:#2364B4;">等待支付的订单（0）</a></td>
</tr>
<tr>
<td>购物积分：<a>0</a></td>
<td><a>礼品卡（0张）</a></td>
<td><a>收藏商品（4）</a></td>
</tr>
<tr>
<td></td>
<td><a>优惠券（0张）</a></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>

表格截图如下：

改之前的代码如下：

<table border="1" style="background-color:#F0F8FB;width:745px;float:left;margin-left:15px;margin-top:15px;text-align:left;border-collapse:collapse;line-height:25px;">
<tr>
<td style="width:240px;float:left;margin-top:0px;">
<img src="data:images/face00.jpg" alt="" style="width:48px;height:48px;"/>
</td>
<td style="width:240px;float:left;margin-top:0px;">
<div class="UserInfo">
<span class="Welcome">欢迎您，${session.user.userName}</span>
<span><a>编辑个人资料</a></span>|
<span><a>修改密码</a></span>|
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<table>
<tr>
<td>会员级别:</td>
</tr>
<tr>
<td>账户余额:</td>
</tr>
<tr>
<td>订单提醒:</td>
</tr>
<tr>
<td>普通会员</td>
</tr>
<tr>
<td>¥0.0</td>
</tr>
<tr>
<td><a style="color:#2364B4;">等待支付的订单（0）</a></td>
</tr>
<tr>
<td>购物积分：<a>0</a></td>
<td><a>礼品卡（0张）</a></td>
<td><a>收藏商品（4）</a></td>
</tr>
<tr>
<td></td>
<td><a>优惠券（0张）</a></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>

有float的截图如下：

静态页面表格的布局问题--在表格里不能用float来布局，不然你怎么调都发现没用啊。相关推荐

润乾报表新功能静态页面和report4包分离
需求背景: 客户在使用润乾报表的时候,为了使导出Excel.PDF.导入Excel.上下载文件等对话框和总体风格一致,都修改了report4包中的静态页面.现在每次更换jar包都需要重新拆包,把里面的 ...
静态页面如何实现 include 引入公用代码
一直以来,我司的前端都是用 php 的 include 函数来实现引入 header .footer 这些公用代码的,就像下面这样:  <!DOC ...
【4001】通过html做一个静态页面的表格表单，嘿嘿。
学习目标: [ 1]学习前端第一天掌握 html(主要表单表格相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知识做静态页面表格表单完成效果,效果图如下: 表单不加颜色是这样的,自己看着设计: ...
html表格设置静态数据,构建静态页面之 [ 表格 ]
表格描述以网格的形式来呈现数据,并且以二维数据表(有行有列)来显示数据内容表格元素元素 - 表示定义表格中的标题元素 - 表示定义表格中的表头元素 - 表示定义表格中的单元格元素 - 表 ...
HTML+CSS第十课：常见的3种网页布局方式：表格布局、DIV+CSS布局、框架布局
知识点:网页布局的方式 1.网页布局常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...
HTML如何改变表格浮动位置,css控制表格样式 css布局浮动及定位
一.制作一张商品信息表,内容自定,要求用到行与列的合并实例 html> 饮料商品信息表 table caption { font-family:"宋体"; font-siz ...
android表格布局最后一个组件,Android布局之TableLayout表格布局
Tablelayout类以行和列的形式对控件进行管理,每一行为一个TableRow对象,或一个View控件.当为TableRow对象时,可在TableRow下添加子控件,默认情况下,每个子控件占据一列 ...
关于静态页面布局中的一些BUG
作为一枚初级程序猿,难免在制作静态页面时会遇到一些BUG,在此,我从网上找了一些资料并且结合自己的项目开发经验,总结了一些在静态页面布局时可能会遇到的问题,希望能对初级程序猿有一定的帮助(资料请参考: ...
仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
仿淘宝电商官网静态页面作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它这是我刚"入坑"的时候写的Demo,因为当 ...

静态页面表格的布局问题--在表格里不能用float来布局，不然你怎么调都发现没用啊。

静态页面表格的布局问题--在表格里不能用float来布局，不然你怎么调都发现没用啊。相关推荐

最新文章

热门文章