13

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

这是我需要的：

  1. 具有一个标题行和多个正文行的表格；
  2. 标题行下方的实线边框；
  3. 仅在标题行和第一个正文行之间的垂直空白（填充？边距？间距？）；
  4. 鼠标悬停时突出显示正文行。

在我为 table 设置样式之前，我无法看到 (2) border-collapse: collapse;。美好的。但是 (3) 显然只适用于border-spacing，并且只适用于<td>元素（不是<tbody>或<tr>），它无论如何都被collapse. 同时，由于某些不可知的原因，,或元素margin无法识别 's ，但在 body 的作品的第一行却没有，因为当我将鼠标悬停在第一行上时，整个页边距- which-is-implemented-as-也被突出显示，这让我感到恶心。<thead><tr><th>padding-top<td>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>
4

5 回答 5

2

这将在没有任何黑客攻击的情况下解决您的问题，当然它完全有可能。更新后的代码（仅 CSS 更改）在下面共享，并附有说明。

问题 3：

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

<tr>默认情况下不能有边距值。再次可以使用黑客（上面提到的答案），但我不会去那里，因为你不想要它。

而且由于我们使用padding了 ，悬停效果将完美地适用于整个行内容。因此，无需任何标记更改即可获得所需的更改。

问题2：

我们可以border-collapse从标签中删除属性table，而是在<th>标签上应用边框（让border-spacing: 0剩余部分或边框不连续）。再次简单:-)

问题 1 和 4已经涵盖。没有您希望的标记更改。这是小提琴

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

<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>
于 2016-01-28T10:37:02.457 回答
0

好的，按顺序：

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;
    }

虽然您可以将 a:hover应用于当前悬停的单元格，以及后来的兄弟姐妹（使用通用兄弟~组合器），但您不能将样式应用于先前出现的兄弟姐妹，因此我们在此处设置td元素的样式以响应:hover其父元素tr.

我们必须设置样式td（而不是直接更改）的background-color原因tr是因为td元素通常不会默认为透明背景，这意味着更改/突出显示的元素background-color会“隐藏” 。background-colortd

JS 小提琴演示。

参考：

于 2012-06-04T00:11:06.187 回答
0

为了应用于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;广告。top现在您可以使用、bottom和属性在表格left内移动 thead 。right我们将使用top: -40px; We do not apply position: absolute;to tbody 将其向上移动 40 像素，因为如果这样做 - 此元素将不再“拉伸页面”，或者换句话说，所有以下元素将忽略其高度。（尝试这样做，看看下面会发生什么

块）我们剩下的唯一一件事是在表格本身上应用一些margin-top，将其向下移动（当我们将thead向上移动时）

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

于 2012-06-04T00:14:30.690 回答
0

在开头添加一个空行怎么样

<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;
}

所以填充将被添加到第一行并且第一行不会在鼠标悬停时突出显示？:)

于 2016-03-04T13:41:36.443 回答
-1

你所有的4点都在那里-

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

  3. 在 BundleConfig 中注册。

    bundles.Add(new StyleBundle("~/Content/css/metroUI").Include("~/Content/css/metro-bootstrap.css", "~/Content/css/metro-bootstrap-responsive.css") );

  4. 现在使用类“gr-items”作为表

<table id="divAllActivities" class="gr-items">

<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>

希望这是你想要的。

于 2013-11-12T06:13:47.377 回答