为什么在 div 区域使用 display:table 时 border-top 不给出相同的边框宽度？

Question

我有以下 HTML 文件：index.html

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
.div_table {
  display: table;
  border-collapse: collapse;
}

.div_table_row {
  display: table-row;
}

.div_table_header {
  font-weight: bold;
  text-align: center;
}

.div_table_cell {
  display: table-cell;
  padding-left: 10px;
  padding-right: 10px;
  font-family: "Open Sans";
  font-size: 11px;
  border-top: 1px solid #000000;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test tera</title>
  <meta name="Tera_tutorial" content="Tera tutorial">
  <meta name="author" content="Practice">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src=""></script>
</head>

<body>


  <div class="div_table">
    <!-- Table header -->
    <div class="div_table_row">
      <div class="div_table_cell div_table_header">
        <p>First name</p>
      </div>
      <div class="div_table_cell div_table_header">
        <p>Last name</p>
      </div>
      <div class="div_table_cell div_table_header">
        <p>Email</p>
      </div>
    </div>

    <!-- Users table content -->

    <div class="div_table_row">
      <div class="div_table_cell">
        <p>fname-01</p>
      </div>
      <div class="div_table_cell">
        <p>lname-01</p>
      </div>
      <div class="div_table_cell">
        <p>fname-01.lname-01@mycorporate.com</p>
      </div>
    </div>

    <div class="div_table_row">
      <div class="div_table_cell">
        <p>fname-02</p>
      </div>
      <div class="div_table_cell">
        <p>lname-02</p>
      </div>
      <div class="div_table_cell">
        <p>fname-02.lname-02@mycorporate.com</p>
      </div>
    </div>

    <div class="div_table_row">
      <div class="div_table_cell">
        <p>fname-03</p>
      </div>
      <div class="div_table_cell">
        <p>lname-03</p>
      </div>
      <div class="div_table_cell">
        <p>fname-03.lname-03@mycorporate.com</p>
      </div>
    </div>

  </div>


</body>

</html>

如果我在 Firefox 中打开我的 HTML 文件，一切都会按预期进行，我会在每一行上方（我的意思是边框顶部）看到一个黑色细边框 (1px)。但是，如果我使用 Google Chrome、Microsoft Edge、Brave 等打开同一个文件。我可以看到第一行和第三行有自动收报机上边框。

你能解释一下我的错误在哪里吗？提前致谢

[编辑]：这是我在 Firefox 中看到的

但这是 Google Chrome 中的不同结果（查看第 1 行和第 3 行）

Answer 1

尝试删除您在 .div_table class 上设置的 border-collapse 属性。

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
.div_table {
  display: table;
}

.div_table_row {
  display: table-row;
}

.div_table_header {
  font-weight: bold;
  text-align: center;
}

.div_table_cell {
  display: table-cell;
  padding-left: 10px;
  padding-right: 10px;
  font-family: "Open Sans";
  font-size: 11px;
  border-top: 1px solid #000000;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test tera</title>
  <meta name="Tera_tutorial" content="Tera tutorial">
  <meta name="author" content="Practice">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src=""></script>
</head>

<body>


  <div class="div_table">
    <!-- Table header -->
    <div class="div_table_row">
      <div class="div_table_cell div_table_header">
        <p>First name</p>
      </div>
      <div class="div_table_cell div_table_header">
        <p>Last name</p>
      </div>
      <div class="div_table_cell div_table_header">
        <p>Email</p>
      </div>
    </div>

    <!-- Users table content -->

    <div class="div_table_row">
      <div class="div_table_cell">
        <p>fname-01</p>
      </div>
      <div class="div_table_cell">
        <p>lname-01</p>
      </div>
      <div class="div_table_cell">
        <p>fname-01.lname-01@mycorporate.com</p>
      </div>
    </div>

    <div class="div_table_row">
      <div class="div_table_cell">
        <p>fname-02</p>
      </div>
      <div class="div_table_cell">
        <p>lname-02</p>
      </div>
      <div class="div_table_cell">
        <p>fname-02.lname-02@mycorporate.com</p>
      </div>
    </div>

    <div class="div_table_row">
      <div class="div_table_cell">
        <p>fname-03</p>
      </div>
      <div class="div_table_cell">
        <p>lname-03</p>
      </div>
      <div class="div_table_cell">
        <p>fname-03.lname-03@mycorporate.com</p>
      </div>
    </div>

  </div>


</body>

</html>

为什么在 div 区域使用 display:table 时 border-top 不给出相同的边框宽度？

Why border-top doesn't give same border width while using display:table in div area?

html

css