小编shl*_*ter的帖子

特定表行之间的边框和间距

我是CSS的新手,我正在开发一个intraweb应用程序,它将在现代标准浏览器中呈现(IE支持不是必需的).我花了很多时间在这个网站和其他网站上寻找答案,但却找到答案"这是不可能的,因为......"或"做这个黑客而不是......"但我不会接受.

这就是我需要的:

一个包含一个标题行和多个主体行的表;
标题行下面的实线边框;
标题行和第一个主体行之间的垂直白色空间(填充？边距？间距？);
鼠标悬停时突出显示正文行.

直到我打造桌子才能看到(2)border-collapse: collapse;.精细.但是(3)显然只适用于border-spacing,而且只适用于无论如何被禁用的<td>元素(不是<tbody>或者<tr>)collapse.同时,对于一些不可知的原因,margin的不认可<thead>,<tr>或<th>元素,但其padding-top身体的第一行上<td>的作品,但它没有,因为当我鼠标移到第一行,整个与容限哪些也被强制执行padding,这让我感到恶心.

我知道在桌子的标题和身体之间有几个像素的边距就像一个真正偏离左边的领域,为什么,任何人都想要的东西,但我应该告诉你什么？我没有便宜的约会.

如果您还要 1)说明如何在不改变标记的情况下执行此操作(从而保持表示与内容的分离,CSS显然是为了鼓励),请尽可能地表现出我对理解CSS的愚蠢和残忍而且居高临下.2)同意我认为CSS很奇怪.

<head><style>
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  thead {
    border-bottom: 4px solid #123456;
  }
  /*** something goes here ***/
  tbody tr:hover {
    background-color: #ABCDEF;
  }
</style></head>

<body>
  <table>
    <thead>
      <tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
    </thead>
    <tbody>
      <tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
      <tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
      <tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
    </tbody>
  </table>
</body>

Run Code Online (Sandbox Code Playgroud)

css row html-table border margin

shl*_*ter

2017 11-15

11
推荐指数

1
解决办法

2万
查看次数