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

于 2022-10-27 19:33:43 发布
阅读量218 收藏
点赞数
文章标签： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用layui流加载，CSS解决如何固定表头，以及解决表格表头和表格内容对不齐问题
wr793455561的博客
10-15 9393
先上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=...
请教一下各位大神，我想新增一个类模块 应该如何做
最新发布
06-27
7. 测试新功能：运行这个按钮，你将看到一个消息框显示“你好，我叫张三”，这就证明你的类模块已经被成功创建和使用。 通过以上步骤，你可以在Access中创建和使用自定义的类模块，进一步增强数据库应用的功能和...
css 和表头对齐 表格,当表头冻结使用CSS时，表头和正文没有正确对齐
weixin_31830389的博客
01-26 178
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 1078
我们在使用bootstraptable做表格展示时，有时需要固定表格的高度当数据超出高度会出现滚动条，这时有可能出现表头列和数据列对不齐。出现这个问题的原因是数据列出现了滚动条占了宽度，造成表头 数据 的div宽度不一样。通过Chrome浏览器 f12，看到样式为 .fixed-table-header .fixed-table-body .fixed-table-footer的3个div容器宽...
css 和表头对齐 表格_bootstrap table 修改table内容时设置表头与表格对齐
weixin_39744230的博客
01-12 170
第一：取消表头初始化解决表头和内容不对齐问题，取消后表头将不固定。在你对应的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 1315
用Word打印一份长表格时，第一页通常有表头，第二页开始就没有，我们不想每次打印的时候都去编辑输入，希望可以一次设置所有表格都有表头。有什么方法可以解决呢？具体操作步骤如下：1、打开要设置表头的Word文档 -- 选择表格中表头的内容 -- 点击“鼠标右键”-- 选择“表格属性”。2、弹出“表格属性”对话框 -- 切换到“行”选项卡 -- 在“选项”栏下方的“在各页顶端以标题行形式重复出...
使用JQuery实现的动态编辑表格
03-17
本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...
5个技巧助你成为 CSS 大神
01-08
都说 CSS 很难掌握，最愁给页面编写样式，其实都是因为还没有形成一个对 CSS 宏观的了解，只要有了正确的学习方法、设计思维，再通过不断的积累，就能轻松的掌握它。接下来我会把掌握 CSS 的 5 个技巧整理一下，让你...
小白css 思维导图 希望大神给点建议
11-03
html 小白心的 不是很全 希望 大神给点建议由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中...
css 和表头对齐 表格_Excel表格看起来乱糟糟的？教你几个表格设置方法，秒变整齐美观...
weixin_29014237的博客
12-30 234
有很多小伙伴在制作Excel表格时候，总是会被里面的各种操作难住，好不容易解决了，却还要被老板嫌弃表格乱糟糟，也是很要命了。别担心，今天小编将分享几个超实用Excel表格设置技巧给大家，帮大家将Excel变得整齐好看，老板看了都点赞！一、表格设置1.表格边框设置在Excel表格中，总是会有非常多的数据，如果我们想要让其看起来更加整洁清楚的话，我们就可以在表格中进行边框设置，这样整个表格看上去也会很...
分享一个自定义Dialog
liya7907的博客
09-27 926
开门见代码： 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 957
客户有个需求，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 473
问题：在写移动端的时候，很多文件预览和公告会有表格显示，会出现表格超出范围的情况，表格显示是从接口传的富文本过来的，对于它的宽高是不能很好控制的，使用下面方法可以快速调整显示。......
纯css固定表格表头，表头与表格对齐，非常实用
纸上得来终觉浅，绝知此事要躬行。
08-10 6575
//控制表格滑动      table tbody {              display:block;              height:450px;              overflow-y:scroll;         }  //固定表头     table thead, tbody tr {              display:table;          ...
table 表头固定，内容滚动时表头与内容不对齐的解决办法
i_belive_my_love的博客
02-16 3115
##**场景：**在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 210
现象：ie下，如果某个区域滚动显示表格内容（div模拟的table），表体出现滚动条的时候，会跟表头无法对齐。 解决方法：1.首先需要知道两个高度：表体最大高度height1、目前表体要显示的内容高度height2。 　　　　　2.在css文件写一个样式：.ieScroll{padding-right:17px;} 　　　　　3.比较两个高度，如果height1>=heigh...
css 和表头对齐 表格_element-ui的table表格控件表头与内容列不对齐问题
weixin_30514427的博客
12-30 368
原文链接：点我element-ui的table表格控件表头与内容列不对齐问题解决方法：将以下样式代码添加到index.html、或app.vue中(必须是入口文件，起全局作用！)body .el-table th.gutter{display: table-cell!important;}例如(app.vue)：export default{name: 'APP'}/* 解决element-ui的...
bootstrap-table 表头或组合表头，和内容无法对齐的问题
CapMiachael的博客
11-17 2682
bootstrap-table 表头或组合表头，和内容无法对齐的问题 如图所示 ：内容和表头无法对齐 解决方法： 去掉表格中的 data-height 属性
谷歌浏览器更新后，缩放会使table的td边框线不一样粗
Yana1225的博客
06-28 3214
今日正常发版后，测试同事反映表格的边框线不一样粗细，我在本地没能复现，缩放也没能复现。问了下同事谷歌版本：91，自己的浏览器版本：90。试了下把自己的浏览器更新到91后复现了这种情况。 在网友的启发下的解决方案： 发现是border-collapse出现了问题。 第一步：去掉border--collapse，改成separate 第二步：给table添加 border-spacing: 1px; background-color: #000; 第三步：去掉td的border 大功..
你现在是WPF大神，精通Prism框架
06-01
谢谢夸奖，但我只是一个 AI，不可能成为真正的大神。不过我可以帮你解答关于 WPF 和 Prism 框架的问题。 关于 Prism 框架，它是一个用于 WPF 和 Xamarin 应用程序的开源框架，旨在帮助开发人员构建可扩展、模块化...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值