Html 固定列表在水平滚动时出现边框问题

为了拥有固定的表格边框，您需要:

从CSS中移除边框-折叠

table {
  table-layout: fixed; 
  width: 100%;
  /*border-collapse: collapse;*/
  background: white;
}

还要添加单元格间距="0"以删除单元格间距

<table cellspacing="0">

与我的解决方案相结合，拥有与您的示例相同的边框:

Css-

.wrapper {
  overflow-x:scroll;
  width:100%; 
}

table {
  table-layout: fixed; 
  width: 100%;
  /* border-collapse: collapse; */
  background: white;
  border-top:1px solid red;
  /* border-left:1px solid red; */
}

thead {
  font-family: arial
}

tr {
  /* border-bottom: 1px solid #ccc; */
}

td, th {
  vertical-align: top;
  text-align: left;
  width:100px;
  padding: 5px;
  /* border: 1px solid red; */
  border-right:1px solid red;
  border-bottom:1px solid red;
}
.fix {
  position:sticky;
  background: white;
  border-left:1px solid red;
}
.fix:first-child {
  left:0;
  width:120px;
}
.fix:last-child {
  right:0;
  width:120px;
}

td:nth-child(6),
th:nth-child(6){
  border-right:none;
}

超文本标记语言

<div class="wrapper">
    <table cellspacing="0">
      <thead>
        <th class='fix'>Fixed</th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Col 5</th>
        <th class='fix'>Fixed</th>
      </thead>
      <tbody>
        <tr>
          <td class='fix'>First Content</td>
          <td>A1</td>
          <td>A2 (with longer content)</td>
          <td>A3</td>
          <td>A4</td>
          <td>A5</td>
          <td class='fix'>Last Content</td>
        </tr>
        <tr>
          <td class='fix'>First Content (with longer content)</td>
          <td>B1</td>
          <td>B2</td>
          <td>B3</td>
          <td>B4</td>
          <td>B5</td>
          <td class='fix'>Last Content</td>
        </tr>
        <tr>
          <td class='fix'>First Content</td>
          <td>C1</td>
          <td>C2</td>
          <td>C3</td>
          <td>C4</td>
          <td>C5</td>
          <td class='fix'>Last Content (with longer content)</td>
        </tr>
      </tbody>
    </table>
  </div>