use :content pseudo-element to change non-first <thead> <th> element content
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";
}
}
}
加载中,请稍侯......
精彩评论