去掉html表格邊框的的方法

發(fā)布時(shí)間：2021-04-12 11:14:02 來(lái)源：億速云閱讀：3742 作者：小新欄目：web開發(fā)

小編給大家分享一下去掉html表格邊框的的方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

去掉html表格邊框的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后在body中通過table標(biāo)簽創(chuàng)建表格內(nèi)容；最后通過“border-left: none;border-right: none;”等css屬性去掉指定的表格邊框即可。

本文操作環(huán)境：windows7系統(tǒng)、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表格邊框的的方法

附上原h(huán)tml代碼：

<!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">
  <h3>人員信息</h3>
  <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>小強(qiáng)</td>
      <td>男</td>
      <td>22</td>
      <td>1996-05-04</td>
      <td>上海市</td>
    </tr>
  </table>
</p>
</body>
</html>

看完了這篇文章，相信你對(duì)“去掉html表格邊框的的方法”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

去掉html表格邊框的的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽