use :content pseudo-element to change non-first <thead> <th> element content_问答_开发者

use :content pseudo-element to change non-first <thead> <th> element content

开发者 https://www.devze.com 2023-03-15 05:09 出处：网络

I\'m still learning more about CSS every day and continue to be surprised by what is possible.For example I just learned about the first-child pseudo element - had NO idea you could do that!So, becaus

I'm still learning more about CSS every day and continue to be surprised by what is possible. For example I just learned about the first-child pseudo element - had NO idea you could do that! So, because I continue to be surprised I thought I would ask here if there is a way to accomplish what I'm after, even though I'm not able to find a solution.

I want to change the content in elements in a of a table that is displayed on non-first pages. In other words, when a table breaks onto a new page and the is rendered again I would like to append content ("Cont...") to the header cells.

I banged out a really simple example that when you Print Preview in your browser will produce two pages, each with two rows. On the SECOND page I'd like to use CSS to change the content of the elements.

Anyone have any ideas? I MUST do this with CSS, I can't change the main html, I can only change the styles.

<html>
<head>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>
                    Column 1
                </th>
                <th>
                    Column 2
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
   开发者_如何学编程             <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
            </tr>
            <tr style="page-break-after:always;">
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
            </tr>
            <tr>
                <td>Row 3, Column 1</td>
                <td>Row 3, Column 2</td>
            </tr>
            <tr>
                <td>Row 4, Column 1</td>
                <td>Row 4, Column 2</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

You might be able to use the :nth-child pseudo-element.

http://css-tricks.com/5452-how-nth-child-works/

You can target only specific rows with :nth-child(), or :nth-of-type(). I'm not certain that :nth-child can handle a range though, so you may have to chain you css rather annoyingly like:

:nth-child(3), :nth-child(4), :nth-child(eleventy!!1!) {properties}

More: http://www.quirksmode.org/css/nthchild.html

Now, of course - if you were using Sass or Compass - this chaining would be simple. Check both items out.

Since content isn't listed as a property that apply within the page context, I don't think you will ever be able achieve it. But remember that it's a work in progress: they might add it on your input.

In spite of that one day you will be able to do that instead:

@media print {
 @page :nth(n+2) {
  @top-center {
   content: "something";
  }
 }
}

use :content pseudo-element to change non-first <thead> <th> element content

精彩评论

关注公众号

热门标签

图文推荐

use :content pseudo-element to change non-first <thead> <th> element content

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：