表格中加入斜线

Question

1、1688后台上传产品的时候表格复制过来的时候样式复制不了，我把表格样式调好了，就是对角线一直没办法做出来

2、

<div style="display: none;">&nbsp;</div>
<div><span>&nbsp;</span><span style="color: #ffffff; font-size: 14.0px; font-weight: bold; line-height: 30.0px; background-color: #4a4a4a;">产品介绍</span></div>
<div class="tinymce-module fd-clr">
<ul style="list-style: none; padding: 0; margin: 0;">
<li class="RESIZE" style="float: left; width: 360.0px; padding: 0; margin: 0; height: 360.0px; overflow: hidden;"><span style="display: table-cell; overflow: hidden; text-align: center; vertical-align: middle; width: 360.0px; height: 360.0px;"><img src="https://cbu01.alicdn.com/img/ibank/2016/822/050/3695050228_1728885958.jpg" alt="弯头三通" /></span></li>
<li style="float: left; margin: 0 0 0 15.0px; line-height: 1.8; width: 372.0px; height: 360.0px; padding: 0;">
<ul style="list-style: none; padding: 0; margin: 0 0 8.0px 0;">
<li style="font-weight: bold; font-size: 14.0px;">产品信息</li>
<li style="margin: 0; font-size: 12.0px;">商品名称： 硅酸钙、珍珠岩加工成型弯头、三通<span class="TIPS">&nbsp;</span></li>
<li style="margin: 0; font-size: 12.0px;">商品品牌： ASK<span class="TIPS">&nbsp;</span></li>
<li style="margin: 0; font-size: 12.0px;">商品货号：<span class="TIPS">&nbsp;硅酸钙弯头、三通</span></li>
<li style="margin: 0; font-size: 12.0px;">商品尺寸：直角弯</li>
<li style="margin: 0; font-size: 12.0px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;虾米弯</li>
<li style="margin: 0; font-size: 12.0px;"><span class="TIPS">&nbsp;</span></li>
</ul>
<ul style="list-style: none; padding: 0; margin: 0 0 8.0px 0;">
<li style="font-weight: bold; font-size: 14.0px;">产品特点</li>
<li style="margin: 0; font-size: 12.0px;">
<p>阿斯克自创成型硅酸钙、珍珠岩弯头、三通，在原有产品基础上，不改变技术 参数和特性的情况下，加工成弯头和三通阀门形状，使用更加方便快捷，最大 程度的提高客户在工程安装上的效率，为用户大大缩减施工时间和用工成本， 也可根据客户的要求特别订制。</p>
<br /><br /></li>
</ul>
</li>
</ul>
<p style="margin: 10.0px 0;">&nbsp;</p>
</div>
<div class="tinymce-module fd-clr">
<div style="background: #4a4a4a; border-left: 6.0px solid #ff7300; padding-left: 10.0px; margin: 10.0px 0;"><span style="display: inline-block; height: 30.0px; padding-left: 5.0px; line-height: 30.0px; color: #ffffff; font-size: 14.0px; font-weight: bold;">产品实拍图</span></div>
<div>
<ul style="list-style: none; margin: 0; padding: 0;">
<li style="float: left; width: 365.0px; margin: 0 5.0px;">
<p class="RESIZE" style="width: 360.0px; height: 360.0px; overflow: hidden;"><span style="display: table-cell; overflow: hidden; text-align: center; vertical-align: middle; width: 360.0px; height: 360.0px;"><img src="https://cbu01.alicdn.com/img/ibank/2016/756/597/3696795657_1728885958.jpg" alt="弯头三通1-3" /></span></p>
<p style="margin: 10.0px 0;">&nbsp;</p>
</li>
<li style="float: left; width: 365.0px; margin: 0 5.0px;">
<p class="RESIZE" style="width: 360.0px; height: 360.0px; overflow: hidden;"><span style="display: table-cell; overflow: hidden; text-align: center; vertical-align: middle; width: 360.0px; height: 360.0px;"><img src="https://cbu01.alicdn.com/img/ibank/2016/117/373/3694373711_1728885958.jpg" alt="弯头三通1-2" /></span></p>
<p style="margin: 10.0px 0;">&nbsp;</p>
</li>
</ul>
<p style="margin: 10.0px 0;">&nbsp;</p>
</div>
</div>
<div class="tinymce-module fd-clr">
<div style="background: #4a4a4a; border-left: 6.0px solid #ff7300; padding-left: 10.0px; margin: 10.0px 0;"><span style="display: inline-block; height: 30.0px; padding-left: 5.0px; line-height: 30.0px; color: #ffffff; font-size: 14.0px; font-weight: bold;">产品特写图</span></div>
<div>
<ul style="list-style: none; margin: 0; padding: 0;">
<li style="float: left; width: 365.0px; margin: 0 5.0px;">
<p class="RESIZE" style="width: 360.0px; height: 360.0px; overflow: hidden;"><span style="display: table-cell; overflow: hidden; text-align: center; vertical-align: middle; width: 360.0px; height: 360.0px;"><img src="https://cbu01.alicdn.com/img/ibank/2016/620/018/3696810026_1728885958.jpg" alt="弯头三通1-6" /></span></p>
<p style="margin: 10.0px 0;">&nbsp;</p>
</li>
<li style="float: left; width: 365.0px; margin: 0 5.0px;">
<p class="RESIZE" style="width: 360.0px; height: 360.0px; overflow: hidden;"><span style="display: table-cell; overflow: hidden; text-align: center; vertical-align: middle; width: 360.0px; height: 360.0px;"><img src="https://cbu01.alicdn.com/img/ibank/2016/980/883/3694388089_1728885958.jpg" alt="弯头三通1-5" /></span></p>
<p style="margin: 10.0px 0;">&nbsp;</p>
</li>
</ul>
<p>&nbsp;</p>
<p style="margin: 10.0px 0;">&nbsp;</p>
</div>
</div>
<div class="tinymce-module fd-clr">
<div style="background: #4a4a4a; border-left: 6.0px solid #ff7300; padding-left: 10.0px; margin: 10.0px 0;"><span style="display: inline-block; height: 30.0px; padding-left: 5.0px; line-height: 30.0px; color: #ffffff; font-size: 14.0px; font-weight: bold;">产品详细数据图</span></div>
</div>
<div class="tinymce-module fd-clr">
<p><span class="font6">常规：</span><span class="font0">EL:R=D EL-LR:R=1.5D</span></p>
<table border="0" cellpadding="0" cellspacing="1" style="border-collapse: separate; border-spacing: 2.0px; text-align: center; font-size: 12.0px; width: 740.0px; height: 320.0px; background-color: #ffffff;">
<tbody>
<tr>
<td width="64"></td>
<td width="64"></td>
<td width="64"></td>
<td width="64"></td>
<td width="64"></td>
</tr>
<tr>
<td height="41" colspan="2" style="background-color: #f2f2f2; padding: 8.0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="font6">厚度（</span><span class="font0">mm</span><span class="font6">）<br />名称</span></td>
<td style="background-color: #f2f2f2; padding: 8.0px;">25</td>
<td style="background-color: #f2f2f2; padding: 8.0px;">40</td>
<td style="background-color: #f2f2f2; padding: 8.0px;">50</td>
<td style="background-color: #f2f2f2; padding: 8.0px;">65</td>
<td style="background-color: #f2f2f2; padding: 8.0px;">75</td>
</tr>
<tr>
<td height="17" style="background-color: #eaeaea; padding: 8.0px;">直角弯（二等分）</td>
<td width="64" rowspan="4" style="background-color: #eaeaea; padding: 8.0px;">规格（mm）</td>
<td colspan="5" style="background-color: #eaeaea; padding: 8.0px;"><span class="font6">&phi;</span><span class="font0">34</span><span class="font6">、&phi;</span><span class="font0">42</span><span class="font6">、&phi;</span><span class="font0">49</span><span class="font6">、&phi;</span><span class="font0">61</span><span class="font6">、&phi;</span><span class="font0">76</span><span class="font6">、&phi;</span><span class="font0">89</span></td>
</tr>
<tr>
<td height="17" style="background-color: #f2f2f2; padding: 8.0px;">虾米弯（二等分）</td>
<td colspan="5" style="background-color: #f2f2f2; padding: 8.0px;">&phi;76<span class="font6">、&phi;</span><span class="font0">89</span><span class="font6">、&phi;</span><span class="font0">102</span><span class="font6">、&phi;</span><span class="font0">114</span></td>
</tr>
<tr>
<td height="17" style="background-color: #eaeaea; padding: 8.0px;">虾米弯（四等分）</td>
<td colspan="5">&phi;141<span class="font6">、&phi;</span><span class="font0">168</span><span class="font6">、&phi;</span><span class="font0">194</span><span class="font6">、&phi;</span><span class="font0">219</span><span class="font6">、&phi;</span><span class="font0">245</span><span class="font6">、&phi;</span><span class="font0">273</span><span class="font6">、&phi;</span><span class="font0">303</span><span class="font6">、&phi;</span><span class="font0">325</span><span class="font6">、&phi;</span><span class="font0">356</span></td>
</tr>
<tr>
<td height="17" style="background-color: #f2f2f2; padding: 8.0px;">虾米弯（大规格）</td>
<td colspan="5" style="background-color: #f2f2f2; padding: 8.0px;">&phi;409<span class="font6">、&phi;</span><span class="font0">458</span><span class="font6">、&phi;</span><span class="font0">508</span><span class="font6">、&phi;</span><span class="font0">559</span></td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>弯头制作最大厚度</p>
</div>
<div class="tinymce-module fd-clr">
<table border="0" cellpadding="0" cellspacing="1" style="border-collapse: separate; border-spacing: 2.0px; text-align: center; font-size: 12.0px; width: 740.0px; height: 320.0px; background-color: #ffffff;">
<tbody>
<tr>
<td width="128" height="41" colspan="2" style="background-color: #eaeaea; padding: 8.0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="font6">名称<br />规格（</span><span class="font0">mm</span><span class="font6">）</span></td>
<td width="102" style="background-color: #eaeaea; padding: 8.0px;"><span class="font6">虾米弯（</span><span class="font0">mm</span><span class="font6">）</span></td>
<td width="102" style="background-color: #eaeaea; padding: 8.0px;"><span class="font6">直角弯（</span><span class="font0">mm</span><span class="font6">）</span></td>
</tr>
<tr>
<td height="17" colspan="2" style="background-color: #f2f2f2; padding: 8.0px;">&phi;76</td>
<td style="background-color: #f2f2f2; padding: 8.0px;">50<span class="font6">及以下</span></td>
<td style="background-color: #f2f2f2; padding: 8.0px;">50<span class="font6">以上</span></td>
</tr>
<tr>
<td height="17" colspan="2" style="background-color: #eaeaea; padding: 8.0px;">&phi;89</td>
<td style="background-color: #eaeaea; padding: 8.0px;">60<span class="font6">及以下</span></td>
<td style="background-color: #eaeaea; padding: 8.0px;">60<span class="font6">以上</span></td>
</tr>
<tr>
<td height="17" colspan="2" style="background-color: #f2f2f2; padding: 8.0px;">&phi;102</td>
<td style="background-color: #f2f2f2; padding: 8.0px;">70<span class="font6">及以下</span></td>
<td style="background-color: #f2f2f2; padding: 8.0px;">70<span class="font6">以上</span></td>
</tr>
<tr>
<td height="17" colspan="2" style="background-color: #eaeaea; padding: 8.0px;">&phi;114</td>
<td style="background-color: #eaeaea; padding: 8.0px;">80<span class="font6">及以下</span></td>
<td style="background-color: #eaeaea; padding: 8.0px;">80<span class="font6">以上</span></td>
</tr>
<tr>
<td height="17" colspan="2" style="background-color: #f2f2f2; padding: 8.0px;">&phi;141</td>
<td style="background-color: #f2f2f2; padding: 8.0px;">100<span class="font6">及以下</span></td>
<td style="background-color: #f2f2f2; padding: 8.0px;">100<span class="font6">以上</span></td>
</tr>
<tr>
<td height="17" colspan="2" style="background-color: #eaeaea; padding: 8.0px;">&phi;168</td>
<td style="background-color: #eaeaea; padding: 8.0px;">125<span class="font6">及以下</span></td>
<td style="background-color: #eaeaea; padding: 8.0px;">125<span class="font6">以上</span></td>
</tr>
<tr>
<td height="17" colspan="2" style="background-color: #f2f2f2; padding: 8.0px;">&phi;194</td>
<td style="background-color: #f2f2f2; padding: 8.0px;">150<span class="font6">及以下</span></td>
<td style="background-color: #f2f2f2; padding: 8.0px;">150<span class="font6">以上</span></td>
</tr>
<tr>
<td height="17" colspan="2" style="background-color: #eaeaea; padding: 8.0px;">&phi;219</td>
<td style="background-color: #eaeaea; padding: 8.0px;">160<span class="font6">及以下</span></td>
<td style="background-color: #eaeaea; padding: 8.0px;">160<span class="font6">以上</span></td>
</tr>
<tr>
<td height="17" colspan="2" style="background-color: #f2f2f2; padding: 8.0px;">&phi;245</td>
<td style="background-color: #f2f2f2; padding: 8.0px;">180<span class="font6">及以下</span></td>
<td style="background-color: #f2f2f2; padding: 8.0px;">180<span class="font6">以上</span></td>
</tr>
<tr>
<td height="17" colspan="2" style="background-color: #eaeaea; padding: 8.0px;">&phi;273</td>
<td style="background-color: #eaeaea; padding: 8.0px;">200<span class="font6">及以下</span></td>
<td style="background-color: #eaeaea; padding: 8.0px;">200<span class="font6">以上</span></td>
</tr>
</tbody>
</table>
<p style="margin: 10.0px 0;">&nbsp;</p>
</div>
<div class="tinymce-module fd-clr">
<div style="background: #4a4a4a; border-left: 6.0px solid #ff7300; padding-left: 10.0px; margin: 10.0px 0;"><span style="display: inline-block; height: 30.0px; padding-left: 5.0px; line-height: 30.0px; color: #ffffff; font-size: 14.0px; font-weight: bold;">企业介绍</span></div>
<p><span style="line-height: 1.5;"><br /><img src="https://cbu01.alicdn.com/img/ibank/2016/575/104/3670401575_1728885958.jpg" alt="1117563544" /><br class="img-brk" /><br class="img-brk" />&nbsp;</span></p>
</div>
<div class="tinymce-module fd-clr">
<div style="background: #4a4a4a; border-left: 6.0px solid #ff7300; padding-left: 10.0px; margin: 10.0px 0;"><span style="display: inline-block; height: 30.0px; padding-left: 5.0px; line-height: 30.0px; color: #ffffff; font-size: 14.0px; font-weight: bold;">企业证书</span></div>
<div>
<p>&nbsp;</p>
<img src="https://cbu01.alicdn.com/img/ibank/2016/185/344/3668443581_1728885958.jpg" alt="undefined" /><br class="img-brk" /><br class="img-brk" /><br class="img-brk" /><br class="img-brk" /><br class="img-brk" /><img src="https://cbu01.alicdn.com/img/ibank/2016/112/505/3667505211_1728885958.jpg" alt="整体憎水硅酸钙制造方法专利证书" /><br class="img-brk" /><br class="img-brk" /><br class="img-brk" /><br class="img-brk" /><img src="https://cbu01.alicdn.com/img/ibank/2016/240/805/3667508042_1728885958.jpg" alt="电力行业供货许可证" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<img src="https://cbu01.alicdn.com/img/ibank/2016/912/560/3670065219_1728885958.jpg" alt="质量信用等级证书" /><br class="img-brk" /><br class="img-brk" /><br /></div>
</div>
<div class="tinymce-module fd-clr">
<div style="background: #4a4a4a; border-left: 6.0px solid #ff7300; padding-left: 10.0px; margin: 10.0px 0;"><span style="display: inline-block; height: 30.0px; padding-left: 5.0px; line-height: 30.0px; color: #ffffff; font-size: 14.0px; font-weight: bold;">购买须知</span></div>
<ul style="list-style: none; padding: 0; margin: 0;">
<li>
<p style="background: #f5f5f5;"><span style="display: inline-block; height: 30.0px; line-height: 30.0px; background: #ffebdb; padding: 0 8.0px; color: #ff7300;">1、付款方式</span></p>
</li>
<li>
<p style="margin: 10.0px 0;">&nbsp;</p>
</li>
<li>
<p style="background: #f5f5f5;"><span style="display: inline-block; height: 30.0px; line-height: 30.0px; background: #ffebdb; padding: 0 8.0px; color: #ff7300;">2、关于售后</span></p>
<p style="margin: 10.0px 0;">&nbsp;</p>
</li>
<li>
<p style="background: #f5f5f5;"><span style="display: inline-block; height: 30.0px; line-height: 30.0px; background: #ffebdb; padding: 0 8.0px; color: #ff7300;">3、发票说明</span></p>
</li>
</ul>
</div>

3、

4、有试过用图片 不知道为何无效

Answer 1

当网页中DIV的边框线设置得足够宽，并定义了不同的颜色时，其相邻的两条边框线交界处就是斜线，所以我们就可以利用border-left和border-top来模拟出斜线的效果。

<div class="out">
      <b>类别</b>
      <em>姓名</em>
</div>

/*模拟对角线*/
.out {
  border-top: 40px #D6D3D6 solid; /*上边框宽度等于表格第一行行高*/
  width: 0px; /*让容器宽度为0*/
  height: 0px; /*让容器高度为0*/
  border-left: 80px #BDBABD solid; /*左边框宽度等于表格第一行第一格宽度*/
  position: relative; /*让里面的两个子容器绝对定位*/

点击查看表格样式示例：
css实现的table表头斜线效果代码实例

Answer 2

给那个格子加一个有斜线的背景图

---

调试完了，发现已经有人答了~

<style type="text/css">            
    /*模拟对角线*/ 
    .out{ 
        border-top:60px #D6D3D6 solid;/*上边框宽度等于表格第一行行高*/ 
        width:0px;/*让容器宽度为0*/ 
        height:0px;/*让容器高度为0*/ 
        border-left:180px #BDBABD solid;/*左边框宽度等于表格第一行第一格宽度*/ 
        position:relative;/*让里面的两个子容器绝对定位*/ 
    } 
    .tr{font-style:normal;display:block;position:absolute;top:-45px;left:-60px;} 
    .lb{font-style:normal;display:block;position:absolute;top:-25px;left:-140px;}
</style>

<td height="41" colspan="2" style="background-color: #f2f2f2; padding: 0.0px;">
    <div class="out">
        <em class="tr">厚度(mm)</em>
        <em class="lb">名称</em>
    </div>
</td>

---

还可以这样实现对角线的效果~

<html  >
<head>
    <style type="text/css" >
        .diag, .override{
            width: 100px;
            height: 100px;
            position: relative;
            background-color: transparent;
        }
        .diag:before {
            position: absolute;
            top: 0px;
            right: 0;
            left: 0;
            bottom: 0;
            border-bottom: 100px solid black;
            border-right: 100px solid transparent;
            content: "";
        }
        .diag:after {
            position: absolute;
            left: 0;
            right: 1px;
            top: 1px;
            bottom: 0;
            border-bottom: 99px solid white;
            border-right: 99px solid transparent;
            content: "";
        }
    </style>
</head>
<body>
    <div class="diag"></div>
    <div class="override" style="top:0px;left:0px;position: absolute;">
        <span style="top:70px;left:20px;position: absolute;" >123</span>
        <span style="top:20px;left:70px;position: absolute;" >456</span>
    </div>
</body>
</html>

Answer 3

用伪类画一根线，然后旋转一定角度