HTMLテーブルの枠線を削除する方法-フロントエンドQ&A-php.cn

HTMLテーブルの枠線を削除する方法

藏色散人

リリース： 2023-01-04 09:36:00

オリジナル

17690 人が閲覧しました

HTML テーブルの境界線を削除する方法: 最初に HTML サンプルファイルを作成し、次に本文の table タグを使用してテーブルのコンテンツを作成し、最後に「border-left: none;border-right:」などの CSS 属性を渡します。 none;" 指定されたテーブルの境界線を削除するだけです。

HTMLテーブルの枠線を削除する方法

#この記事の動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

#HTML の表で左右の境界線が削除されます

.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 コードを添付します:

<!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 中国語 Web サイトの他の関連記事を参照してください。