css - 在table中使用border-collapse时如何设置不同的border颜色?
迷茫
迷茫 2017-04-17 11:17:31
[HTML讨论组]

代码如下:
http://jsbin.com/qigavatewe/1/

希望某些表格单元的border是不同的颜色。
由于使用了border-collapse,所以只会看到td的右边和下边有颜色。
如何解决?

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(3)
高洛峰

不知道是不是你想要的效果
css

.table1{
        border-collapse: collapse;
    }
    td{
        border:1px solid #ccc;
        height: 30px;
        padding: 0px;
    }
    .red{
        display: block;
        width: 100%;
        height: 100%;
        border:1px solid red;
    }


html


 <table width="200"  class="table1" border="1" >
  <tr>
    <td>&nbsp;</td>
    <td><span class="red"></span></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>  
怪我咯

如果要都显示成红色,貌似只能给左边的 td 设置 border-right 给上边的 td 设置 'border-bottom`,

或者 border不要设置在 td~

PHP中文网

有一个比较tricky的解决方式,如果你只是为了与其它的cell区分开来。
css:

td.mycell{
color: red;
border:2px solid red;
}
当border变宽之后就能把每条边都着色。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号