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

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

这就是我需要的：

>具有一个标题行和多个主体行的表;
>标题行下的实体边框;
>标题行和第一个主体行之间的垂直空格(padding？margin？spacing？);
>鼠标悬停时突出显示正文行.

我不能得到(2)可见,直到我风格的表边框崩溃：崩溃.精细.但是(3)显然只能使用border-spacing,只有< td>元素(不是< tbody>或< tr>),无论如何被崩溃禁用.同时,由于某些不可知的原因,< aad>,< tr>或< th>元素,但是在body的< td>的作品的第一行上具有padding-top,除非它不是,因为当我将鼠标悬停在第一行时,整个margin – 被实现为padding得到突出显示,这恶化了我.

我知道在桌子的头部和身体之间有几个像素的边距就像一个真正的左上角,为什么 – 任何人都想要那个想要的东西,但是我应该告诉你什么？我没有便宜的日期.

请尽可能残酷和高兴,指出我的愚蠢在理解CSS,只要您也可以1)说如何做到这一点,而不改变标记(从而保持与内容的分离表示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>

解决方法

这将解决您的问题,而不会有任何黑客和其他行为完全可能.更新的代码(只有CSS更改)在下面的解释下共享.

问题3：

我们可以连续使用所有< td>的CSS选择器：first-of-type(仅针对第一行)在它下面使用属性padding-top.简单:-)

< TR>默认情况下不能使用边距值.再次黑客可用(上面提到的答案),但我不会去那里,因为你不想要它.

而且由于我们使用了填充,所以悬停效果将在整行内容上完美地工作.因此获得所需的更改,而不会有任何标记更改.

问题二：

我们可以从表中删除属性border-collapse,而是在< th>标签上应用边框(让border-spacing = 0保持或边框不连续).简单一遍:-)

问题1和4已经被覆盖.没有你想要的标记更改. Here is the Fiddle

所以更新的样式代码看起来像

<head><style>
  table {
    border-spacing: 0;
  }
  thead tr th {
    border-bottom: 4px solid #123456;
  }
  tbody tr:hover {
    background-color: #ABCDEF;
  }

  /*** added ***/
  tbody tr:first-of-type td {
    padding-top: 10px;
  }

</style></head>

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

解决方法

相关文章