html表格边框怎么去掉-前端问答-PHP中文网

html表格边框怎么去掉

藏色散人

发布： 2021-04-12 09:06:41

原创

18477人浏览过

去掉html表格边框的方法：首先创建一个HTML示例文件；然后在body中通过table标签创建表格内容；最后通过“border-left: none;border-right: none;”等css属性去掉指定的表格边框即可。

html表格边框怎么去掉

htmledit_views-b5506197d8.css"/>

本文操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

HTML中Table去掉左右两边的边框

.table {
    text-align: center;
  }
  .table table {
    font-size: 14px;
    border-collapse: collapse;
    width: 70%;
    table-layout: fixed;
    text-align: center;
    line-height: 25px;
    margin:0 auto;
  }

    .table table tr {
        border: dashed 1px #a59e9e;
        border-left: none;
        border-right: none;
    }

登录后复制

效果如图所示：

附上原html代码：

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Table去掉左右两边的边框</title>
</head>
<style>
  .table {
    text-align: center;
  }
  .table table {
    font-size: 14px;
    border-collapse: collapse;
    width: 70%;
    table-layout: fixed;
    text-align: center;
    line-height: 25px;
    margin:0 auto;
  }

    .table table tr {
        border: dashed 1px #a59e9e;
        border-left: none;
        border-right: none;
    }
</style>
<body>

<p class="table">
  <h2>人员信息</h2>
  <table>
    <tr>
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
      <td>出生日期</td>
      <td>地址</td>
    </tr>
    <tr>
      <td>小明</td>
      <td>男</td>
      <td>20</td>
      <td>1998-10-12</td>
      <td>北京市</td>
    </tr>
    <tr>
      <td>小花</td>
      <td>女</td>
      <td>19</td>
      <td>1999-02-02</td>
      <td>上海市</td>
    </tr>
    <tr>
      <td>小强</td>
      <td>男</td>
      <td>22</td>
      <td>1996-05-04</td>
      <td>上海市</td>
    </tr>
  </table>
</p>
</body>
</html>

登录后复制

【推荐学习：css视频教程】

立即学习“前端免费学习笔记（深入）”；

以上就是html表格边框怎么去掉的详细内容，更多请关注php中文网其它相关文章！