Question

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

这就是我需要的：

包含一个标题行和多个正文行的表格;
标题行下的实线边框;
标题行和第一个正文行之间的垂直空白（填充？边距？间距？）;
在鼠标悬停时突出显示正文行。

在我设置表格border-collapse: collapse;之前，我无法看到（2）。精细。但是（3）显然仅适用于border-spacing，仅适用于<td>元素（不是<tbody>或<tr>），collapse无论如何都禁用了这些元素。同时，由于某些不可知的原因，margin，<thead>或<tr>元素无法识别<th>，但第一行上的padding-top被<td>识别身体的padding是有效的，除非它没有，因为当我鼠标悬停在第一行时，整个边距 - 实现为 - <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时的愚蠢，如同你一样，如果你也 1）说不怎么做而不改变标记（从而保持演示文稿的分离）从内容CSS显然是为鼓励）或2）同意我认为CSS很奇怪。

{{1}}

Answer 1

这将解决你的问题，没有任何黑客和当然完全可能。更新后的代码（仅限CSS更改）将在下面与说明共享。

问题3 ：

我们可以连续使用CSS选择器:first-of-type（仅定位第一行），并使用<td>属性padding-top。简单:-)

默认情况下，

<tr>不能包含边距值。还有黑客攻击（上面提到的答案），但我不会去你那里，因为你不想要它。

此外，由于我们使用了padding，因此悬停效果可以完美地对整个行内容起作用。因此，在没有任何标记更改的情况下获得所需的更改。

问题2 ：

我们可以从border-collapse移除属性table，而是在<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>

Answer 2

好的，按顺序：

1：一个包含一个标题行和多个正文行的表：

这是元素thead和tbody的设计目标：

<table>
    <thead>
        <tr><th>heading one</th><th>Heading two</th></tr>
    </thead>
    <tbody>
        <!--
            all body table rows in here
        -->
    </tbody>
</table>

还有tfoot（参见参考资料），如果使用的话，必须在 tbody元素之前声明。

2：标题行下的实线边框：

thead tr th { border-bottom: 2px solid #000; }

选择th元素中的thead元素，此处可能不需要tr选择器，虽然没有任何损害，但可以简化为：thead th {/*...*/}

3：标题行和第一个正文行之间的垂直空白（填充？边距？间距？）。似乎padding无法应用于thead，tbody或tr元素，因为它们基本上（我认为）是“非视觉的”，所以它必须在td元素上定义。在悬停时，这意味着在:hover期间第一行占据了令人不安的大“行”（参见下一部分）。

tbody tr:first-child td { padding-top: 1em; }

4：鼠标悬停时突出显示正文行。

tbody tr:hover td { background-color: #ffa; }

虽然您可以将:hover应用于当前悬停的单元格以及后来的兄弟姐妹（使用一般兄弟~组合子），但您无法将样式应用于之前出现的兄弟姐妹，所以这里我们正在设置td元素的样式，以响应其父:hover的{{1}}。

我们必须设置tr样式（而不是直接更改td的{{1}}的原因是因为background-color元素通常不会默认为透明背景，表示已更改/突出显示的tr被td元素background-color“隐藏”。

JS Fiddle demo

参考文献：

Table row-groups, thead, tbody, tfoot elements。

Answer 3

为了将margin应用于第一个表格行，您需要先将其设为display: block;，因为边距只能应用于块元素（包括内联块）

但这是使用定位的另一种解决方案：

<head><style>
  table {
    border-collapse: collapse;
    border-spacing: 0;
    position: relative; /* Add positioning */
    margin-top: 40px; /* Add some margin */
  }
  thead {
    border-bottom: 4px solid #123456;
  }
  /*** something goes here ***/
  thead {
    position: absolute; /* Position this element absolute */
    top: -40px;  /* And move it up */
  }
  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>
  <p>Thats how its done!</p>
</body>

基本上我们将position: relative;应用于表格，position: absolute;应用于thead。现在，您可以使用top，bottom，left和right属性在桌面内移动thead。我们将使用top: -40px;将其向上移动40px 我们不会将position: absolute;应用于tbody，因为如果我们这样做 - 此元素将不再“拉伸页面”，换句话说，以下所有元素都将忽略其高度。（尝试这样做，看看下面的

块会发生什么）我们唯一剩下的就是将一些边缘顶部应用于桌子本身，将其向下移动（当我们移动它时）

是的，CSS有时看起来有点奇怪，但这主要是因为我们忘记了应该如何处理某些页面元素（即表及其子元素）

Answer 4

如何在开头添加一个空行，如

<tbody>
    <tr><td> </td></tr>
    <tr><td>blablablabla</td></tr>

并使用此CSS

tbody tr:first-child td{
    padding-top: 15px;
}
tbody tr:first-child:hover{    
    background-color: transparent;
}

因此，填充将添加到第一行，第一行不会突出显示鼠标悬停？：）

Answer 5

你所有的4分都在那里 -

首先在这里下载地铁ui css http://metroui.org.ua/
将两个css文件1. metro-bootstrap，2.metro-bootstrap-responsive包含在您的项目中。
在BundleConfig中注册。

bundles.Add（new StyleBundle（“〜/ Content / css / metroUI”）。Include（“〜/ Content / css / metro-bootstrap.css”， “〜/内容/ CSS /地铁的自举-responsive.css”））;
现在使用表“gr-items”表

＆LT; table id =“divAllActivities”class =“gr-items”＆gt;

<thead>
    <tr><th><span>Comment</span></th></tr>
</thead>
<tbody>
    <tr>
        <td><span>OperationDateTime</span></td>
    </tr>
     <tr>
        <td><span>OperationDateTime</span></td>
     </tr>
</tbody>

希望这是你想要的。

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

5 个答案: