请教各位大神用css编辑的表格框显示不一致该怎么办

于 2022-10-27 19:33:43 发布
阅读量247 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010554412/article/details/127559061
版权

大家好，我是个淘宝主，想利用css编辑宝贝详情的介绍，其中有一部分涉及表格，可是很奇怪的是，每次在DREAMWAVE中，或是淘宝自带的源码中查看均不显示表格框，如下图

 可是只要正式发布，就会显示成这样，如下图

 关于表格部分的代码是这样的，请问是哪里的原因造成显示不一致呢，怎么改成不显示表格框呢？

<table align="center" border="0" cellspacing="0" width="650">
    <tbody>
        <tr>
            <td align="middle" bgcolor="#f3f3f3" height="35" valign="center" width="109">
            <div style="text-align:center;"><span style="font-size:12px;"><span style="font-family:microsoft yahei;"><strong>领标尺码 </strong></span></span></div>
            </td>
            <td align="middle" bgcolor="#f3f3f3" valign="center" width="73">
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" bgcolor="#f3f3f3" valign="center" width="73">
            <div style="text-align:center;"><span style="font-size:12px;"><span style="font-family:microsoft yahei;"><strong>衣长 </strong></span></span></div>
            </td>
            <td align="middle" bgcolor="#f3f3f3" valign="center" width="73">
            <div style="text-align:center;"><span style="font-size:12px;"><span style="font-family:microsoft yahei;"><strong>胸围 </strong></span></span></div>
            </td>
            <td align="middle" bgcolor="#f3f3f3" valign="center" width="73">
            <div style="text-align:center;"><span style="font-size:12px;"><span style="font-family:microsoft yahei;"><strong>肩宽 </strong></span></span></div>
            </td>
            <td align="middle" bgcolor="#f3f3f3" valign="center" width="73">
            <div style="text-align:center;"><span style="font-size:12px;"><span style="font-family:microsoft yahei;"><strong>袖长 </strong></span></span></div>
            </td>
            <td align="middle" bgcolor="#f3f3f3" valign="center" width="73">
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" bgcolor="#f3f3f3" valign="center" width="73">
            <div style="text-align:center;"><span style="font-size:12px;"><span style="font-family:microsoft yahei;"><strong>备注 </strong></span></span></div>
            </td>
        </tr>
        <tr>
            <td align="middle" height="40" valign="center"><span style="font-family:microsoft yahei;"><span style="font-size:12px;">18-24M</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family:microsoft yahei;"><span style="font-size:12px;">38</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family:microsoft yahei;"><span style="font-size:12px;">27</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family:microsoft yahei;"><span style="font-size:12px;">23</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">33</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">&nbsp;</span></span></div>
            </td>
        </tr>
        <tr>
            <td align="middle" height="40" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">2T</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">40</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">29</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">24</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">34</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">&nbsp;</span></span></div>
            </td>
        </tr>
        <tr>
            <td align="middle" height="40" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">3T</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">42</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">30</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">26</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">35</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;">&nbsp;</div>
            </td>
        </tr>
        <tr>
            <td align="middle" height="40" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">4T</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">44</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">32</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">28</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">35</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;"><span style="line-height:18px;">单位：CM</span>&nbsp;</span></span></div>
            </td>
        </tr>
        <tr>
            <td align="middle" height="40" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">5T</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">46</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">35</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">30</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">36</span></span>
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;">&nbsp;</div>
            </td>
            <td align="middle" valign="center">
            <div style="text-align:center;"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">&nbsp;</span></span></div>
            </td>
        </tr>
        <tr>
            <td align="middle" height="40" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">6T</span></span></td>
            <td align="middle" valign="center">&nbsp;</td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">48</span></span></td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">37</span></span></td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">32</span></span></td>
            <td align="middle" valign="center"><span style="font-family: 'microsoft yahei';"><span style="font-size: 12px;">38</span></span></td>
            <td align="middle" valign="center">&nbsp;</td>
            <td align="middle" valign="center">&nbsp;</td>
        </tr>
    </tbody>
</table>

u010554412
关注
Qt开发经验总结
草上爬的博客
12-02 8979
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
CSS显示不完整 — 解决方案
最新发布
PixelNinja的博客
09-21 753
有时候，CSS样式文件可能没有正确加载，或者加载的顺序不正确，导致CSS样式显示不完整。在上面的示例中，我们通过在HTML文件中使用内联CSS样式和外部CSS文件（styles.css）来解决CSS显示不完整的问题。如果您使用了多个选择器并且样式不完整，可以通过提高具有更高权重的选择器的优先级来解决这个问题。属性冲突：如果多个规则中指定了相同的CSS属性，并且产生了冲突，可以通过更具体的选择器来覆盖冲突的规则，或者使用!检查文件路径：确保CSS文件的路径是正确的，并且与HTML文件中的链接匹配。
使用layui流加载，CSS解决如何固定表头，以及解决表格表头和表格内容对不齐问题
wr793455561的博客
10-15 9465
先上HTML部分的代码： &lt;table class="layui-table"&gt; &lt;thead class="top-head"&gt; &lt;tr&gt; @for(var item in zkColumnDescs){ @if(item.field != 'equipId'){ &lt;th class=...
css 和表头对齐 表格,当表头冻结使用CSS时，表头和正文没有正确对齐
weixin_31830389的博客
01-26 202
I have a table of the following format when i m trying to fix its head using the following css, I m losing the alignment , the table header and body are not getting aligned properly..What can I do to ...
css 和表头对齐 表格_bootstrap table列和表头对不齐的解决方法
weixin_35327421的博客
02-23 1150
我们在使用bootstraptable做表格展示时，有时需要固定表格的高度当数据超出高度会出现滚动条，这时有可能出现表头列和数据列对不齐。出现这个问题的原因是数据列出现了滚动条占了宽度，造成表头 数据 的div宽度不一样。通过Chrome浏览器 f12，看到样式为 .fixed-table-header .fixed-table-body .fixed-table-footer的3个div容器宽...
css 和表头对齐 表格_bootstrap table 修改table内容时设置表头与表格对齐
weixin_39744230的博客
01-12 192
第一：取消表头初始化解决表头和内容不对齐问题，取消后表头将不固定。在你对应的js(bootstrap-table.min.js或bootstrap-table.js，我用的bootstrap-table.min.js，故以下都是以bootstrap-table.min.js为准)引用中注释如下两句代码：this.resetHeader(), b += this.$header.outerHeigh...
excel表格打印每页都有表头_怎样设置Word表格打印时每页都显示表头？不会的看看这篇教程！...
weixin_39794734的博客
11-18 1448
用Word打印一份长表格时，第一页通常有表头，第二页开始就没有，我们不想每次打印的时候都去编辑输入，希望可以一次设置所有表格都有表头。有什么方法可以解决呢？具体操作步骤如下：1、打开要设置表头的Word文档 -- 选择表格中表头的内容 -- 点击“鼠标右键”-- 选择“表格属性”。2、弹出“表格属性”对话框 -- 切换到“行”选项卡 -- 在“选项”栏下方的“在各页顶端以标题行形式重复出...
JavaFX中TextFieldTableCell的颜色问题
wangjiawei0227的博客
04-12 1562
在做大作业的过程中用了javafx,然后想实现类似股票的颜色列表，一个tableview，如果股票涨了就用红色，跌了就用绿色。 一开始一直以为是TableCell已经被TextField重写，所以产生了奇怪的bug 结果写了很久找了很多办法但是都有异常，最后请教大神才知道是一行中格式有double和string两种，所以Item要用Object这个类就好了 最后附上重写的TableC
webmagic采集CSDN的Java_WebDevelop页面
热门推荐
hepanlaurence的专栏
05-23 1万+
使用webmagic采集博客类的网站示例
linux c编程获取excel文件内容,c读取excel文件内容
weixin_35853499的博客
05-06 2457
如何用C语言实现读取excel文件中的数据呢？要做的是在Linux环境下使用C语言实现快速读取excel文件并保存成文本格式基本思路 基础实现方法同上篇文章《直接通过ODBC读、写Excel表格文件》相同，都是通过ODBC来把Excel表格文件当成数据库文件来进行读、写等操作，所以在Excel表格文件中写入的行头名必须是唯一的(不要重名，相当于数据库中的ID值)。C语言读取excel文件的数据现在...
如何成为一名很酷的机器人工程师
MuscleMonk的博客
09-19 2005
观文有感 之 如何成为一名很酷的机器人工程师 闲来垂钓碧溪上。今天来钓一波职业规划，记录一下笔记（特别注意：本文中大部分内容是复制粘贴的，只有少数位置的删改和整理，目的是分享一下大佬的讲解）： 文章目录观文有感 之 如何成为一名很酷的机器人工程师1.前言2.大一3.大二4.大三5.大四6.原文作者的话 1.前言 （1）机器人学的公认难题是：在物理世界中实现类人的活动能力 （2）机器人学的核心问题是：做好与物理世界的交互，在主流的机器人学分支中分为三类：传感器和处理算法（激光雷达、多目视觉、融合算法），多刚体
css 和表头对齐 表格_Excel表格看起来乱糟糟的？教你几个表格设置方法，秒变整齐美观...
weixin_29014237的博客
12-30 252
有很多小伙伴在制作Excel表格时候，总是会被里面的各种操作难住，好不容易解决了，却还要被老板嫌弃表格乱糟糟，也是很要命了。别担心，今天小编将分享几个超实用Excel表格设置技巧给大家，帮大家将Excel变得整齐好看，老板看了都点赞！一、表格设置1.表格边框设置在Excel表格中，总是会有非常多的数据，如果我们想要让其看起来更加整洁清楚的话，我们就可以在表格中进行边框设置，这样整个表格看上去也会很...
分享一个自定义Dialog
liya7907的博客
09-27 953
开门见代码： public final class CommonDialog extends Dialog { /*** 内部回调 */ private interface InnerCallback { void onLeftButtonClicked(); void onRightButtonClicked(); } /*** 按钮监听器: 默认实现关闭弹窗 */ public static class OnButton
css 和表头对齐 表格_CSS设置table下tbody滚动条与thead对齐的方法
weixin_35705450的博客
12-30 981
客户有个需求，table的表头不动，但是表格内容需要限定高度加上滚动条，如果直接在tbody加上高度和overflow-y:scroll，thead的表头就对不齐。下面就是解决这个问题的方法：效果如下：威易网CSS教程table tbody {display:block;height:195px;overflow-y:scroll;}table thead, tbody tr {display:t...
css快速实现表格完整显示
lemon今天学习了吗？的博客
08-11 543
问题：在写移动端的时候，很多文件预览和公告会有表格显示，会出现表格超出范围的情况，表格显示是从接口传的富文本过来的，对于它的宽高是不能很好控制的，使用下面方法可以快速调整显示。......
el-table加border出现表头与内容右边框错位问题
weixin_44090040的博客
12-30 656
只需要在您的全局样式中添加如下css样式即可 body .el-table th.gutter{ display: table-cell!important; }
纯css固定表格表头，表头与表格对齐，非常实用
纸上得来终觉浅，绝知此事要躬行。
08-10 6625
//控制表格滑动      table tbody {              display:block;              height:450px;              overflow-y:scroll;         }  //固定表头     table thead, tbody tr {              display:table;          ...
table 表头固定，内容滚动时表头与内容不对齐的解决办法
i_belive_my_love的博客
02-16 3313
##**场景：**在vue项目中使用原生table时，添加内容滚动表头固定后发现内容和表头不对齐的情况 ##解决办法： <div class="mytable"> <table border="1" cellspacing="0" style="border-color: #aaaaff;"> <!--border="1" cellspacing="0"--> <thead style="background-co
ie下div模拟的表格，表头表体无法对齐
01-30 232
现象：ie下，如果某个区域滚动显示表格内容（div模拟的table），表体出现滚动条的时候，会跟表头无法对齐。 解决方法：1.首先需要知道两个高度：表体最大高度height1、目前表体要显示的内容高度height2。 　　　　　2.在css文件写一个样式：.ieScroll{padding-right:17px;} 　　　　　3.比较两个高度，如果height1>=heigh...
零基础入门：大神详解前端开发CSS与布局
CSS的作用在于将网页内容与显示样式分离，提高代码的可维护性和页面的呈现效果。它遵循一定的层叠顺序规则，从浏览器的缺省设置开始，然后优先级较高的外部样式表、内部样式和内联样式依次覆盖。 文章详细讲解了CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值