How to hide the table top border in css-CSS Tutorial-php.cn

How to hide the table top border in css

WBOY

Release： 2021-12-09 17:22:49

Original

4665 people have browsed it

Method: 1. Use the "table element {border-top-color:transparent}" statement to set the top border color to be transparent, thereby hiding the top border of the table; 2. Use "table element {border-top-style: none}" statement makes the table element have no top border, that is, it hides the top border of the table.

How to hide the table top border in css

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to hide the top border of the table in css

1. In css, if you want to hide the top border of the table, you can use border-top- color attribute, set the color of the upper border of the table to transparent.

border-top-color is used to set the color of the top border of the element.

The example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
table{
  border-top-color:transparent;
}
</style>
<table border="1">
  <tr>
    <td>111</td>
    <td>222</td>
  </tr>
  <tr>
    <td>333</td>
    <td>444</td>
  </tr>
    <tr>
    <td>555</td>
    <td>666</td>
  </tr>
  <tr>
    <td>777</td>
    <td>888</td>
  </tr>
</table>
</body>
</html>

Copy after login

Output result:

How to hide the table top border in css

2. In css, you can also use the border-top-style attribute to Sets the style of the element's upper border.

When the attribute value is none, the element is defined to have no upper border.

The example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
table{
  border-top-style:none;
}
td{
  border-top-style:none;
}
</style>
<table border="1">
  <tr>
    <td>111</td>
    <td>222</td>
  </tr>
  <tr>
    <td>333</td>
    <td>444</td>
  </tr>
    <tr>
    <td>555</td>
    <td>666</td>
  </tr>
  <tr>
    <td>777</td>
    <td>888</td>
  </tr>
</table>
</body>
</html>

Copy after login

Output result:

How to hide the table top border in css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to hide the table top border in css. For more information, please follow other related articles on the PHP Chinese website!