红颜丹 发表于 2021-4-15 16:24:22

tbody首列偏移1个像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ScrollBar</title>
    <style type="text/css">
      table, th,td{
      border: #555555 2px solid;
      }
      table{
      border-collapse: collapse;
      width: 300px;
      }
      #tb2,tr,td{
      border-top:none;
      }
      th,td{
      width: 100px;
      }
      .tbcontainer{
      height: 180px;
      width: 317px;
      overflow-y: auto;
      }
    </style>
</head>
<body>
<table>
    <thead>
      <tr>
      <th></th>
      <th>变更前</th>
      <th>变更后</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<div class="tbcontainer">
<table id="tb2">
    <tbody>
      <tr>
      <td>编程语言</td>
      <td>Hello Cobol!</td>
      <td>Hello Java</td>
      </tr>
      <tr>
      <td>编程语言</td>
      <td>Hello Cobol!</td>
      <td>Hello Java</td>
      </tr>
      <tr>
      <td>编程语言</td>
      <td>Hello Cobol!</td>
      <td>Hello Java</td>
      </tr>
      <tr>
      <td>编程语言</td>
      <td>Hello Cobol!</td>
      <td>Hello Java</td>
      </tr>
      <tr>
      <td>编程语言</td>
      <td>Hello Cobol!</td>
      <td>Hello Java</td>
      </tr>
      <tr>
      <td>编程语言</td>
      <td>Hello Cobol!</td>
      <td>Hello Java</td>
      </tr>
      <tr>
      <td>编程语言</td>
      <td>Hello Cobol!</td>
      <td>Hello Java</td>
      </tr>
      <tr>
      <td>编程语言</td>
      <td>Hello Cobol!</td>
      <td>Hello Java</td>
      </tr>
      <tr>
      <td>编程语言</td>
      <td>Hello Cobol!</td>
      <td>Hello Java</td>
      </tr>
    </tbody>
</table>
</div>
</body>
</html>
问题：
为何tbody的第一列比th的第一列往左偏移了一个像素呢

我为红颜 发表于 2021-4-28 19:00:58

table 的width: 304px;
因为要包含中间两条竖线

穿越火线 发表于 2021-5-5 17:07:19

建议直接放到一个table里不就没这事儿了
页: [1]
查看完整版本: tbody首列偏移1个像素