小樱知识 > 生活常识tableborder样式（html中border用法）

tableborder样式（html中border用法）

提问时间：2022-03-16 13:26:12来源：小樱知识网

表格的默认样式不好看，设置border=”1″的时候,还会出现双边框，就像下面一样，直接上代码，看效果对比，而且用flex,可以轻易实现文字垂直居中。

1.修改前

<table border="1">    <tr>      <td>班级</td>      <td>姓名</td>      <td>成绩</td>    </tr>    <tr>      <td>一班</td>      <td>小明</td>      <td>90</td>    </tr>     <tr>      <td>二班</td>      <td>小红</td>      <td>100</td>    </tr> </table>

2.修改后

<table class="tab-box">   <tr>     <td>班级</td>     <td>姓名</td>     <td>成绩</td>   </tr>   <tr>     <td>一班</td>     <td>小明</td>     <td>90</td>   </tr>   <tr>     <td>二班</td>     <td>小红</td>     <td>100</td>   </tr> </table>// css.tab-box, .tab-box td{    border:1px solid #EBEEF5;    border-collapse:collapse;/* 让边框合并，不让出现双边框*/  }  .tab-box{    width: 100%;  }  .tab-box tr{    display: flex;/*flex布局*/  }  .tab-box td {    flex: 1;/*让每个单元格宽度一样*/    height:30px;    padding-left:10px;    display: flex;/*flex布局*/    align-items: center;/*让单元格文字垂直居中*/    color: #606266;  }

以上内容就是为大家推荐的tableborder样式（html中border用法）最佳回答，如果还想搜索其他问题，请收藏本网站或点击搜索更多问题

内容来源于网络仅供参考
二维码

扫一扫关注我们

版权声明：所有来源标注为小樱知识网www.xiaoyin02.com的内容版权均为本站所有，若您需要引用、转载，只需要注明来源及原文链接即可。

本文标题：tableborder样式（html中border用法）

本文地址：https://www.xiaoyin02.com/shcs/119210.html

上一篇：cad怎么旋转整个图纸（cad快速看图旋转图纸的教程）

下一篇：dnfsf辅助破解版（dnf公益服gm权限通用）

相关文章

|网站首页| 生活常识| 家务日常| 自然科学| 数码解读| 运动有氧| 家庭美食| 恋爱情感| 常见问题| 生肖运势|

本网站属于科学类内容，传达严谨、科学的内容，专门聚焦于生活中的常识误区为大家解决常识问题

Copyright © 2022 小桜知识网 版权所有 京ICP备2021039702号-11

中国互联网诚信示范企业违法和不良信息举报中心网络110报警服务中国互联网协会中国互联网协会信用评价中心诚信网站