I am having an issue stylizing a class in the first table while keeping the rest of the tables the same. Let me show an example
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
So I want the class a of the first table to be different than the rest of the tables. How do I go about doing that?
Thank you for your time.
Edit:
I forgot to mention. I cannot add separate classes on each table. I can only give them all the same class. It is generated that way.
In newer browser you can use CSS3's nth-child():
table:nth-child(1) tr.a{
background-color:#ff0000;
}
This works if this is the 1st child of the parent element (e.g. say that these 3 tables are the children of the body.
You can be also more specific that this is the nth table element using the :nth-of-type() selector.
Related
I have an HTML table with many rows and several columns. I want to append a td to some of these rows such that the td would look like a new row and span the entire width of the table. This is useful to keep all of the data for a single table row under the same tr tag and would allow me to show extra data that relates to that same row but that won't fit in a single table column, like long-form notes. For example:
<table>
<thead>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</thead>
<tbody>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td class="magic" colspan="3">
This is long-form data that should look like a full-width
row without creating an extra tr tag to hold it.
</td>
</tr>
</tbody>
</table>
Note that the same table also uses jquery-ui's sortable api to allow the rows to be drag/dropped in order to sort them. Also, the end result is then printed.
How do I do this without messing up my markup with illegal divs or abandoning html tables altogether?
You can use CSS flexbox property to achieve what you are trying, use a class selector for the specific row you want to span the width.
Flexbox has a property flex-direction which let's define the flow of the children of a component to either column or row
Example; Link to a codepen demo
Ps; I have not tested it on a jguery UI.
You can use the colspan attribute for this:
<tr>
<th colspan="5">Full-Width Row</th>
</tr>
Replace the 5 with the number of columns in the table. I haven't confirmed this works with jQuery UI, but it's pretty quick to test it out.
Please help me with CSS selector.
I need to apply special attributes to the last row in a table, which (row) does'n have specified class, for example class "zzz".
<table>
<tbody>
<tr class="odd">...</tr>
<tr class="even zzz">...</tr>
<tr class="odd">...</tr>
<tr class="even">This one should be selected</tr>
<tr class="odd zzz">...</tr>
<tr class="even zzz">...</tr>
</tbody>
</table>
I'm looking for only pure CSS solution, not javascript one. Please don't suggest :not() pseudo-class, as some browsers do not support it.
Thank you for your help,
--Vadim
Sorry, this is not doable with pure CSS, not even with a selector that only modern browsers support.
I'm not 100% certain i fully understand, but you can use something like
tr:last-child
in your css
In a table all <th> are having class and <td> dont.
Is it possible to apply the styles from those <th> class to all its corresponding <td>'s with plain css and dont need of any script?
Additionally table is dynamic and so columns index may differ. So i cant use nth-child and only way i can navigate it with class.
Here is the Fiddle
Any better ideas for cross-browser?
Update:
table may have n number of columns and not limited to 2 columns
You could handle this using <col>, http://www.quirksmode.org/css/columns.html#background, only other way I see would need to add the classes everywhere or to use JS.
Try this
<table>
<tr>
<th class="a">`Column A`</th>
`<th class="b">`Column B`</th>
</tr>
<tr>
<td class="a">`aaa`</td>
<td class="b">`bbb`</td>
</tr>
<tr>
<td class="a">`ccc`</td>
<td class="b">`ddd`</td>
</tr>
</table>
Suppose I have the following table (JS Fiddle):
<table class="data-table">
<thead>
<tr>
<th scope="col">Method</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pickup*</td>
<td>no charge</td>
</tr>
<tr>
<td>Campus mail</td>
<td>no charge</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">* At 1st floor desk</td>
</tr>
</tfoot>
</table>
The rows of the TBODY have been zebra striped using an :nth-child(2n) selector. But the background of the row in the TFOOT doesn't get those styles, and breaks the even/odd striping any time the table has an even number of rows in the TBODY.
I'd like to select the TFOOT row with something like .data-table tbody tr:nth-child(2n):last-child + tr, but that won't work. The + selector is for adjacent sibling elements that share a single parent element. The two TRs here aren't siblings, they're cousins.
I could use jQuery (something like $(".data-table tbody tr:nth-child(2n):last-child").parent().next().find("tr").css({"background-color": "blue"})). But I'd prefer a CSS solution if there is one.
So, is there any way to select an element's cousin?
CSS works down the DOM (although selectors are processed backwards), so you can't navigate up an element tree and then back down to reach an element's cousin. You can only either operate on the same level of elements (only going forward), or go down.
You'll have to go with your jQuery solution.
Reference:
http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#selectors
No, there are only decendant and limited sibling selectors. You would have to use javascript to locate the element.
I am developing a card board which is 4x3. So I have tryed to do markup with XTHML Transitional. I have used containers mixed with tables.
The example for first row:
<table>
<tr>
<div class="slot_01"></div>
<div class="slot_02"></div>
<div class="slot_03"></div>
<div class="slot_04"></div>
</tr>
<tr>
...
</tr>
</table>
Is this correctly done? Or its better to use only div/span blocks instead everywhere and make styling through css?
If you use a table, use table, tr, td, not div.
I think most people nowadays try to avoid tables for anything but "really tabular data" and prefer the "pure CSS" solution.
It depends a bit on your overall markup (e.g. what you want to display in the cells). In your case, I guess I would go for a tableless solution.
No, You need td's in there, like this:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
If you really need to, put your divs inside the TDs.
If your data is tabular in nature there's nothing wrong with using tables. Everyone else is correct - you need to use table cells instead of the divs in your sample code.
Ideally use div/span blocks if you can, but the above code is ok, you just need to wrap each div in a td element:
<table>
<tr>
<td><div class="slot_01"></div></td>
<td><div class="slot_02"></div></td>
<td><div class="slot_03"></div></td>
<td><div class="slot_04"></div></td>
</tr>
<tr>
...
</tr>
</table>
For the lay out of the entIre page I would do it tableless. Remember: XHTML is for structure, CSS for displaying the structure.