I want to set a border on a table. My problem is: that on some pages one or more table are around the real one.
So my question is: How can i set the border only on the last table within others? Or when the table is alone, than this one?
Example:
<table>
.. This table should have borders..
</table>
<table> /* This one shouldn't have borders*/
<tr><td>
<table>
.. This table should have borders..
</table>
</td></tr>
</table>
Thank you for your help
I have an example here: http://jsfiddle.net/ecto0jtd/
Ok, I think the Idea from anonymousxxx (http://jsfiddle.net/fauzi/k0ntkt4d/1/) is the easiest way to solve this. Thank you
The purpose seems to be to set border on a table but only if it does not contain a table. This is generally not possible without using extra markup, such as a class attribute. The reason is that in current CSS, you cannot select an element on the basis of its content.
The simplest approach is to set, say, class="border" on those tables that should have a border.
Or you could use <table border> and the selector table[border] in a rule that sets the specific borders you want (but the border attribute is regarded as bad/deprecated/nonconforming by some).
In your example above,
tr td table{
border: 2px solid red;
}
Would style only tables nested within a row and data cell of a parent table.
Depends how many levels deep you want to go and if you only want to style nested tables or the last nested table? It also has broader browser support than pseudo-selectors which may be a factor depending on which browsers you need to support
See http://codepen.io/anon/pen/LCHyE for working example
Related
I'm trying to make a hover effect for a table with multiple rowspan but I don't manage to make it fully work.
The css as described in another stackoverflow is not working (see solution here https://codepen.io/cimmanon/pen/KqoCs ).
The example here (rowspan on multiple columns) : https://codepen.io/anon/pen/rJXgzW
The hover css effect is defined as :
tbody:hover td[rowspan], tr:hover td {
background: red;
}
Any suggestions?
The trick in the working example is to use multiple <tbody> elements in the table where each table body contains one table cell spanning multiple rows. That way
tbody:hover td[rowspan] { background: red; }
makes it magically appear as requested. This doesn't work with the second example in the same way, as there are (1) multiple row-spanning elements and (2) it's using <th> elements (which is easy to address, though).
To get it working using CSS only, you would need to nest tables inside table cells.
This is my first post and I don't know how to structure the code any differently.
First off everything displays fine and if I have 22 different ids it would validate fine too.
In my table, the column is styled by nth child to align everything centre.
If I class the TD, then the class gets overridden by the TR nth child
So I have currently this HTML
<td colspan="2" id="statsdiv">Total of Houses..</td>
And this CSS
#statsdiv {text-align:right;}
.table1861 tr td:first-child {
text-align:center;
}
I have 355 rows in the table, and 22 need to be aligned to the right hand side. Surely I don't need to have the same ID with 22 different suffixes
Thank you
Like Harry mentioned in the comments
The rule
.table1861 tr td:first-child {
text-align:center;
}
will never overwrite
#statsdiv {text-align:right;}
Cause the ID is a more specific identifier. More details on CSS specificity can be found here
So probably you didn't show all the IDs and classes in your example thats why you might really face the problem you are saying in your question.
To answer the other part of your question though: Yes just adding a class instead of an id like:
<td colspan="2" class="align-right">Total of Houses..</td>
should work:
.table1861 tr td.align-right {text-align:right;}
But you might want to have a look at calculating a selector's specificity to not run into any issues
Change your ID to a class, and then in your css for the class use the !important selector after you align right, this will make it take priority.
Suppose I have something like this:
<table class="myTable">
<colgroup span="2" /><colgroup span="2" />
<tr><td>........</tr>
And so on...
Then on the stylesheet:
table.myTable colgroup
{
border-right: solid 5px #ffffff;
}
The point being that I want some space to separate colgroups in my table.
It's working fine in Firefox and IE8. I already read everywhere that IE7 does not implements borders for colgroup, but here is a call to your imagination and creativity, does anyone have an idea of how I could achieve a similar result in IE7, without adding a class to every cells or generating empty cell...
Here's an exemple of the result in Firefox 4 : http://imageshack.us/photo/my-images/853/capturezz.png/
The headers generated can be litterally of any form, some case are really complex. This is why the colgroup solution is interesting, since it is quite simple to calculate the needed span.
Every suggestions will be appreciated.
Don't have much experience in IE7, but this might work:
You can check if it is possible to set a background-image. And align that image (with the desired color) to the right side of the cell, making some kind of a fake border look.
In chrome setting a border on a colgroup doesn't work eighter. Setting a background-image does work.
Greetz,
XpertEase
In order to use the border property in tables, you must set the following rule. If not you wont get them
table {
border-collapse:collapse;
}
Then you will get borders working as you pretend
Is it ok to use cellpadding="2" cellspacing="2" in <table>? Or are these not recommended by W3C and not right according to web standards?
What are alternatives in CSS?
Update: and is it also ok to use <td align="right" valign="top">?
My question is in terms of separation of content and presentation and W3C recommendations.
Update:
According to this chart in <table> only align and bgcolor are not allowed in Strict version. So is it ok to allow other properties of <table>?
alt text http://shup.com/Shup/293811/11021055643-My-Desktop.png
No, the attributes are not officially deprecated but they are generally frowned upon, since you should use CSS for presentation.
For cellpadding you can easily replace it with padding in CSS:
table.classname td {
padding: 4px;
}
For cellspacing, first decide if it's really necessary. If you don't have any borders on the table cells, or you don't want spacing between the borders of each cell then it isn't. (Personally I think cell spacing looks bad design-wise, but it may be useful in some circumstances.)
It's quite nice to do this:
table {
border-collapse: collapse;
}
Then each table cell shares the border with its neighbour, meaning you can add, say, 1px top and bottom borders and you just get 1px separating each row.
To separate borders, however, you can use this CSS, though it probably doesn't work in IE6.
table.data td {
border-collapse: separate;
border-spacing: 4px;
}
While it's technically fine, it is strongly not recommended.
Imagine if your site had many tables across many pages and you wanted to change the padding or the spacing for one reason or another. Well, you would have to go through your entire site and make the changes.
Or you can use CSS and change your entire site by changing a line of code in one location. This is not only far more efficient, but its easier, helps you avoid mistakes, and keeps you consistent.
<style type="text/css">
table td { padding:10px; margin:10px; }
</style>
If you want to use some tables with padding and margins and others without, you can create classes in your CSS by adding a "." before a name of your choice:
<style type="text/css">
.myTable td { padding:10px; margin:10px; }
</style>
<table class="myTable> etc...
Note that class names are case sensitive. There are also many other attributes you can have fun with like border, background-color, etc...
In short, while cell-spacing and cell-padding attributes are not deprecated, its far better to use CSS for ease and consistency across your site.
<style type="text/css">
table.padded-table td {
padding:10px;
}
</style>
The cell-padding and cell-spacing properties are still fully supported. Although some people will tell you to do it with CSS setting padding and margin on the table cells, this is still the easy way to have it applied to every cell in a table.
If you want a list of properties and which ones are deprecated, I find w3schools to be the most reliable source of information.
w3schools: td tag
w3schools: table tag
I would like to have all cells in a with "vertical-align:top" style. For technical reasons outside my control, I cannot define a new class, or change the stylesheet at all; nor can I set "style" for individual cells, or even rows. All I can do is set the "style" attribute of the <table> element itself.
Using <table style="vertical-align:top"> fails -- apparently, it sets the alignment of the table within its own context, not of individual cells inside it. Is there any other alternative that I'm missing?
You can use css
table tr td {
vertical-align: top;
}
No, as far as I can see there is no way to do this without some form of access to either the td itself or a style sheet.
Can you apply a workaround like this one? It's not pretty and invalid according to the W3C, but should nevertheless work in all browsers:
<style type='text/css'> table.topalign td { vertical-align: top } </style>
<table class="topalign">
....
Set the "classic" HTML valign attribute on the table. The value will be inherited by the cells.
<table valign="top">
…
See Tables, Table formatting by visual user agents, Horizontal and vertical alignment in the HTML 4 spec.
table tr {valign: top}
In this case you don't need to use css class.