I am wondering if this is possible.
I have the following html table with a large html files (with other tables):
<table>
<tbody>
<tr>
<td class="someCell"></td>
</tr>
</tbody>
</table>
Is there a CSS selector to select the table element of the cell with class someCell?
There is currently no way to select the parent of an element in CSS, but the following works with jQuery:
$(".someCell").parents('table').addClass("someClass");
Related
I'm trying to combine an anchor-offset with an anchor-target-style on a table-row.
Having the anchor-ID applied to the table row and styling it via 'tr:target td' does achieve the desired look, while the solutions provided here ( offsetting an html anchor to adjust for fixed header ) achieve the desired offset, but only for text.
I can't use the top-voted solution as it requires the "display: block"-attribute which is incompatible to the tr-tag as far as I know. If somehow possible I would prefer a only css/html solution
The structure I use:
<table>
<tr id="anchor-target1"> <td> Something </td> </tr>
<tr id="anchor-target2"> <td> Something </td> </tr>
</table>
Update: JSFiddle-Example. Goal is to combine both functions: https://jsfiddle.net/7rknaqwu/5/
For specific css requirements I'm using multiple <tbody> tags in my table design which looks something like this:
Use of multiple tbody tags
But I also require a wrapper for multiple tbody tags (something like a common tbody parent) such that this wrapper can be scrolled in order achieve the following effect:
A common tbody which can be scrolled
How do I achieve the latter srolling effect in the former one?
(P.S.: I know this can be done through nested table approach, but I'm looking for other alternatives if any)
As mentioned in the comments by FelipeAls and others that a <tbody> tag can be wrapped only by a <table> tag, I tried wrapping <thead> and <tbody>s in separate tables to create the desired effect in the following way:
<table>
<thead>
...
</thead>
</table>
<table>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
</table>
This solved the issue.
Here's a Working Demo.
You cannot have a wrapper for tbody elements inside a table. The tbody element itself is a wrapper for tr elements. HTML syntax does not allow any other container for tbody but table. What matters more is that this syntax rules is actually enforced by the way browsers parse HTML.
If you try to use, say, a div element as a wrapper (the most reasonable approach), it will actually create a div element in the DOM, but an empty one, and before the table. All the tbody and tr elements are inserted into the table element; they are effectively extracted from the div element, which thus becomes empty, unless it contains something else than table-related elements.
An illustration, using intentionally invalid markup:
<style>
.x { outline: solid red }
</style>
<table>
<tbody>
<tr><td>foo
</tbody>
<div class=x>
FOO!
<tbody>
<tr><td>foo2
</tbody>
<tbody>
<tr><td>foo3
</tbody>
</div>
<tbody>
<tr><td>The end
</tbody>
</table>
The conclusion is that you need a different approach. The most obvious one is to use just a single tbody element. If this is not feasible, you should explain why, but this would be a topic for a new question.
This is my simplified markup:
<table class="kOverzicht kOverzichtFirst">
<tr>
woensdag 26/02
</tr>
</table>
So I already tried using a span or p element to wrap the text, but this was not allowed when I checked it with the validator.
What is the best way to style the text inside the tr? I cannot do this through the entire table because the actual table consists of multiple tr elements.
Any suggestions?
You need a <td> inside of the <tr>
<table class="kOverzicht kOverzichtFirst">
<tr>
<td>woensdag 26/02</td>
</tr>
</table>
<tr> tag just to define a table row.. A table cell <td> where the data is contained.
Add the style text to the
<td> tag to be created inside the <tr>.
Like
`<table class="kOverzicht kOverzichtFirst">
<tr>
<td style="padding-left: 5px; font size="10""> </td>
</tr>
</table>`
This will help in styling specific lines only.
I would suggest you to wrap the text inside a td
<table class="kOverzicht kOverzichtFirst">
<tr>
<td>woensdag 26/02</td>
</tr>
</table>
Then use the following css:
table.kOverzicht td {
// define your css here
}
You should use td instead. For example,
<table class="kOverzicht kOverzichtFirst">
<tr>
<td style="color:red;">
woensdag 26/02
</td>
</tr>
Alternatively,
<style>.kOverzicht td {color:red;}</style>
<table class="kOverzicht kOverzichtFirst">
<tr>
<td>
woensdag 26/02
</td>
</tr>
As others have answered, you should really wrap the text in a cell container, a td or th element, and style that element. The details depend on the real structure of the table. In particular, a table with one column only does not usually make sense as a data table. If the text should span all the columns in the cell, you should use the colspan attribute, e.g. (assuming arbitrarily that the table has 5 columns)
<table class="kOverzicht kOverzichtFirst">
<tr>
<td colspan="5">woensdag 26/02</td>
</tr>
<!-- other rows go here -->
</table>
But to address the question as asked, you can style text inside a tr element like the text content of any other element, e.g.
tr { color: red; font-weight: bold }
However, with the invalid markup as in the question, the tr element has no content. You can see this by looking at the page in the developer tools of a browser. The browser has parsed it so that the text data precedes the entire table and the tr element is empty, <tr></tr>, so the style has no effect.
If you use valid markup with e.g. a td element inside tr, the text will be content in td. Setting text properties on tr may have an effect on it via inheritance; this happens for color, font-weight, and any other property.
It is possible to create a tr element with text directly inside it, but only using scripting, not via markup. Example:
<table id=t>
</table>
<script>
var row = document.createElement('tr');
row.textContent = 'woensdag 26/02';
document.getElementById('t').appendChild(row);
</script>
This is normally not recommended, for several reasons, but this is part of the answer to the question asked: to style text in a tr directly (and not via inheritance), you would need to create the td element with JavaScript.
I've run into a curious problem; I've got a form inside a <tr>, however the form refuses to wrap any tags inside it. I've made a quick JSFiddle here to play around with. Firebug reports that the form isn't wrapping anything:
The <form> element is greyed out and not wrapping anything. The HTML for this test is below
<table>
<form>
<tr>
<td>Input</td>
<td>Another input</td>
</tr>
<tr>
<td colspan="4"><span>Other stuff</span></td>
</tr>
</form>
<tr>
<td>
Rows not affected by the form
</td>
</tr>
<tr>
<td>
Rows not affected by the form
</td>
</tr>
</table>
As can be seen, the form holds two trs in the written markup. I read here that this is invalid, so my question is can I create a form that holds two or more trs and an arbitrary amount of other elements inside a table? The table has other rows in it not associated with the form, so putting a <form> round the entire table is unhelpful, although seeing as the other rows won't have any inputs for the form (POST request), I suppose a form could be put around the entire table.
Which is a better solution; whole-table wrap, or a working fix for just enclosing the needed rows in a form tag? I know I could put a table inside a td > form, but then the column widths wouldn't be the same in the nested table, which is why I came to ask this question.
You cannot interrupt the <table> structure with any tags besides <thead>, <tfoot>, <tbody>, <tr>, <th>, or <td>. You form tags need to be encapsulated between two <td> or your entire <table> needs to be placed within the <form> tag.
<table>
<tr>
<td>
<form>
...form data...
</form>
</td>
</tr>
</table>
..or..
<form>
<table>
...
</table>
</form>
you can only put a form inside a td basically, so you could put those 2 rows inside a new table that you create inside a td
like ...
<table><tr><td><form><table><tr>...</tr><tr>...</tr></table></form></td></tr><tr>...</tr><tr>...</tr></table>
The <form> tag can only be placed inside a <td> element or outside the <table> in this case.
If I were you, I'd just put the <form> around the whole table since you said there won't be any other forms within it.
Or, you could replace the <table> completely with <div>s instead that use display: table; or display: table-cell;.
I'm creating a simple hierarchical table with html and CSS and I'm getting into trouble with formatting the last td element with class .child to be on next line.
I want to have the nested table inside table > tr > td.child becase each table can be sorted and javascript sorters don't implement any grouping of rows (my problem of having nested table could be easily solved by moving the .child > table element into next table > tr however this would break the nice nesting structure)
Is there a way to put td.child on next row with css?
html sample:
<table>
<tr>
<td>I have</td>
<td>1</td>
<td>pie</td>
<td class="child">
<table>
<tr>
<td>I have</td>
<td>1</td>
<td>pie</td>
</tr>
</table>
</td>
</tr>
</table>
You could do something like this . You'd need to be careful cross browser though (only checked on Chrome)