设为首页收藏本站
开启辅助访问 切换到宽版

小白教程

 找回密码
 立即注册
热搜: python PHP html
小白教程»小白交流区 › 技术交流区 › Python › tbody首列偏移1个像素
返回列表 发新帖
查看: 5688|回复: 2

tbody首列偏移1个像素

[复制链接]
红颜丹

1

主题

1

帖子

3

积分

新手上路

Rank: 1

积分
3
发表于 2021-4-15 16:24:22 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>ScrollBar</title>
  6.     <style type="text/css">
  7.       table, th,td{
  8.         border: #555555 2px solid;
  9.       }
  10.       table{
  11.         border-collapse: collapse;
  12.         width: 300px;
  13.       }
  14.       #tb2,tr,td{
  15.         border-top:none;
  16.       }
  17.       th,td{
  18.         width: 100px;
  19.       }
  20.       .tbcontainer{
  21.         height: 180px;
  22.         width: 317px;
  23.         overflow-y: auto;
  24.       }
  25.     </style>
  26. </head>
  27. <body>
  28.   <table>
  29.     <thead>
  30.       <tr>
  31.         <th></th>
  32.         <th>变更前</th>
  33.         <th>变更后</th>
  34.       </tr>
  35.     </thead>
  36.     <tbody>
  37.     </tbody>
  38.   </table>
  39.   <div class="tbcontainer">
  40.   <table id="tb2">
  41.     <tbody>
  42.       <tr>
  43.         <td>编程语言</td>
  44.         <td>Hello Cobol!</td>
  45.         <td>Hello Java</td>
  46.       </tr>
  47.       <tr>
  48.         <td>编程语言</td>
  49.         <td>Hello Cobol!</td>
  50.         <td>Hello Java</td>
  51.       </tr>
  52.       <tr>
  53.         <td>编程语言</td>
  54.         <td>Hello Cobol!</td>
  55.         <td>Hello Java</td>
  56.       </tr>
  57.       <tr>
  58.         <td>编程语言</td>
  59.         <td>Hello Cobol!</td>
  60.         <td>Hello Java</td>
  61.       </tr>
  62.       <tr>
  63.         <td>编程语言</td>
  64.         <td>Hello Cobol!</td>
  65.         <td>Hello Java</td>
  66.       </tr>
  67.       <tr>
  68.         <td>编程语言</td>
  69.         <td>Hello Cobol!</td>
  70.         <td>Hello Java</td>
  71.       </tr>
  72.       <tr>
  73.         <td>编程语言</td>
  74.         <td>Hello Cobol!</td>
  75.         <td>Hello Java</td>
  76.       </tr>
  77.       <tr>
  78.         <td>编程语言</td>
  79.         <td>Hello Cobol!</td>
  80.         <td>Hello Java</td>
  81.       </tr>
  82.       <tr>
  83.         <td>编程语言</td>
  84.         <td>Hello Cobol!</td>
  85.         <td>Hello Java</td>
  86.       </tr>
  87.     </tbody>
  88.   </table>
  89.   </div>
  90. </body>
  91. </html>
复制代码

问题：
为何tbody的第一列比th的第一列往左偏移了一个像素呢

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

我为红颜

0

主题

1

帖子

2

积分

新手上路

Rank: 1

积分
2
发表于 2021-4-28 19:00:58 | 显示全部楼层
table 的  width: 304px;
因为要包含中间两条竖线
回复

使用道具 举报

穿越火线

0

主题

1

帖子

2

积分

新手上路

Rank: 1

积分
2
发表于 2021-5-5 17:07:19 | 显示全部楼层
建议直接放到一个table里不就没这事儿了
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|小白教程 ( 粤ICP备20019910号 )

GMT+8, 2024-9-20 14:27 , Processed in 0.026004 second(s), 27 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc. Template By 【未来科技】【 www.wekei.cn 】

快速回复 返回顶部 返回列表