无法删除表格html css中单元格之间的单元格间距

Question

我正在尝试使用 html 和 css 为我的网页创建一个表格。但问题是我无法让它工作，我的表格中的单元格之间有一个明显的网格，我无法摆脱它。我在谷歌上找了几个小时没有任何改进的解决方案。这是我使用当前代码得到的示例：。如您所见，在每个标题单元格之间，有一条明显的线。如果我在那里改变颜色，其余的身体细胞也是如此。如果需要，这里是页面其余部分的一些样式：

<style media="screen">
    html, body
    {
      height: 100%;
    }

    body
    {
      margin: 0;
      background-color: #292929;
      overflow: hidden;
    }

    nav
    {
      position: fixed;
      top: 0%;
      right: 0;
      left: 0;
      width: 319px;
      display: table;
      /* margin: 0 auto; */
      /* transform: translateY(-50%); */

      padding-top: 10px;
      padding-left: 10px;

      /* added */
      table-layout: fixed;
    }

    nav a
    {
      width: 70px;
      position: relative;
      /* width: 33.333%; */
      display: table-cell;
      text-align: center;
      color: #949494;
      text-decoration: none;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-weight: bold;
      padding: 10px 20px;
      transition: 0.2s ease color;
    }

    nav a:before, nav a:after
    {
      content: "";
      position: absolute;
      border-radius: 50%;
      transform: scale(0);
      transition: 0.2s ease transform;
    }

    nav a:before
    {
      top: 0;
      left: 10px;
      width: 6px;
      height: 6px;
    }

    nav a:after
    {
      top: 5px;
      left: 18px;
      width: 4px;
      height: 4px
    }

    nav a:nth-child(1):before
    {
      background-color: red;
    }

    nav a:nth-child(1):after
    {
      background-color: yellow;
    }

    nav a:nth-child(2):before
    {
      background-color: yellow;
    }

    nav a:nth-child(2):after
    {
      background-color: orange;
    }

    nav a:nth-child(3):before
    {
      background-color: #00e2ff;
    }

    nav a:nth-child(3):after
    {
      background-color: #89ff00;
    }

    nav a:nth-child(4):before
    {
      background-color: blue;
    }

    nav a:nth-child(4):after
    {
      background-color: #00e2ff;
    }

    nav a:nth-child(5):before
    {
      background-color: purple;
    }

    nav a:nth-child(5):after
    {
      background-color: palevioletred;
    }

    nav a:nth-child(6):before
    {
      background-color: #ff008c;
    }

    nav a:nth-child(6):after
    {
      background-color: pink;
    }

    nav a:nth-child(7):before
    {
      background-color: purple;
    }

    nav a:nth-child(7):after
    {
      background-color: red;
    }



    #indicator
    {
      position: absolute;
      left: 4%;
      bottom: 0;
      width: 30px;
      height: 3px;
      background-color: #fff;
      border-radius: 5px;
      transition: 0.2s ease left;
    }

    nav a:hover
    {
      color: #fff;
    }

    nav a:hover:before, nav a:hover:after
    {
      transform: scale(1);
    }

    nav a:nth-child(1):hover ~ #indicator
    {
      background: linear-gradient(130deg, red, yellow);
    }

    nav a:nth-child(2):hover ~ #indicator
    {
      left: calc(4% + 100%/7);
      background: linear-gradient(130deg, yellow, orange);
    }

    nav a:nth-child(3):hover ~ #indicator
    {
      left: calc(4% + 100%/7 * 2);
      background: linear-gradient(130deg, #00e2ff, #89ff00);
    }

    nav a:nth-child(4):hover ~ #indicator
    {
      left: calc(4% + 100%/7 * 3);
      background: linear-gradient(130deg, blue, #00e2ff);
    }

    nav a:nth-child(5):hover ~ #indicator
    {
      left: calc(4% + 100%/7 * 4);
      background: linear-gradient(130deg, purple, palevioletred);
    }

    nav a:nth-child(6):hover ~ #indicator
    {
      left: calc(4% + 100%/7 * 5);
      background: linear-gradient(130deg, #ff008c, pink);
    }

    nav a:nth-child(7):hover ~ #indicator
    {
      left: calc(4% + 100%/7 * 6);
      background: linear-gradient(130deg, purple, red);
    }

    #back_btn {
      display: block;
      position: fixed;
      left: 0;
      bottom: 0;
      padding: 10px 14px;
      margin: 20px;
      color: #fff;
      font-family: Arial;
      font-size: 14px;
      text-decoration: none;
      background-color: #000;
      border-radius: 4px;
      box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
      z-index: 125;
    }



    </style>

这是表格的主要样式：

<style media="screen"> /* table */
    /* schedule css */

    .schedule_holder {
      /* center */
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);

      overflow: auto;
      height: 70%;
      margin-top: 4%;

      border-radius: 5px;

      /* box-shadow:
      1px 1px 0 #444,
      2px 2px 0 #444,
      3px 3px 0 #444,
      4px 4px 0 #444,
      5px 5px 0 #444,
      6px 6px 0 #444,
      5px 5px 15px #999; */
      /* center end */
    }

    /* rest of table */


    ::-webkit-scrollbar {
      display: none;
    }
    body {
      margin: 0;
      padding: 2rem;
    }

    table {
      text-align: left;
      position: relative;
      border-collapse: collapse;

      background-color: white;
      border-radius: 5px;
    }
    thead {
      background: #565656;
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }
    th, td {
      padding: 10px;
      border-collapse: collapse;
    }
    tr th {
      /* background: #565656; */
      background-color: rgba(0, 0, 0, 0);
      color: white;
    }
    tr.red th {
      background: red;
      color: white;
    }
    tr.green th {
      background: green;
      color: white;
    }
    tr.purple th {
      background: purple;
      color: white;
    }
    th {
      background: white;
      position: sticky;
      top: 0; /* Don't forget this, required for the stickiness */
      /* box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4); */
    }
    </style>

连同html正文：

<body>
    <nav id="days_nav">
      <a href="#">Måndag</a>
      <a href="#">Tisdag</a>
      <a href="#">Onsdag</a>
      <a href="#">Torsdag</a>
      <a href="#">Fredag</a>
      <a href="#">Lördag</a>
      <a href="#">Söndag</a>
      <div id="indicator"></div>
    </nav>



    <div class="schedule_holder" id="monday_holder">
      <table>
        <thead>
          <tr>
            <th>Lektion</th>
            <th>Lärare</th>
            <th>Start</th>
            <th>Slut</th>
            <th>Inställd?</th>
            <th>Information</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Lorem.</td>
            <td>Ullam.</td>
            <td>Vel.</td>
            <td>At.</td>
            <td>Quis.</td>
            <td>Quis.</td>
          </tr>
          <tr>
            <td>Quas!</td>
            <td>Velit.</td>
            <td>Quisquam?</td>
            <td>Rerum?</td>
            <td>Iusto?</td>
            <td>Quis.</td>
          </tr>
          <tr>
            <td>Voluptates!</td>
            <td>Fugiat?</td>
            <td>Alias.</td>
            <td>Doloribus.</td>
            <td>Veritatis.</td>
            <td>Quis.</td>
          </tr>
          <tr>
            <td>Maiores.</td>
            <td>Ab.</td>
            <td>Accusantium.</td>
            <td>Ullam!</td>
            <td>Eveniet.</td>
            <td>Quis.</td>
          </tr>
        </tbody>
      </table>
    </div>
    <a href="javascript: go_back();" id="back_btn">Tillbaka</a>
    <script type="text/javascript">

    </script>
  </body>

我希望有人能够帮助我。提前致谢！

编辑： 主要样式是从here 复制的，它确实可以正常工作，但是一旦我将其复制到我的代码中，它就开始出现一些问题，我尝试创建的其他表也是如此。

Answer 1

当我完全复制您对 css 和 html 的内容时，我看不到白线。但是...我认为这可能与您在表格样式表中的最后一个样式有关。

th {
      background: white;
      position: sticky;
      top: 0; /* Don't forget this, required for the stickiness */
      /* box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4); */
}

如果将背景颜色更改为红色或橙色等亮色会怎样？网格线颜色会改变吗？

编辑：

我查看了您提供的链接。我能够在 Safari 中看到这个问题，但只有当我放大时。我相信这是由position: absolute 引起的渲染问题，也许是<div class="schedule_holder"> 上的转换 更新该元素的样式对我有用。

.schedule_holder {
   overflow: auto;
   height: 70%;
   margin-top: 4%;
   border-radius: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
}

Answer 2

它看起来不像真正的边框，但可能是渲染/舍入问题（半像素的东西）。确保您没有在浏览器中放大/缩小，并调整窗口大小以查看它是否仍然存在。

您可以尝试在正文或表格上设置红色背景颜色，以查看该白线是否变为红色。如果是这样，则意味着两者之间存在一个空间，您可以通过在 tr 而不是 thead/th 上设置背景颜色来消除该空间。