I have a table like below. Imagine there are multiple columns, I thought by formatting the <col/> tag I would be able to change the formatting of every <td> in that column. I want to give data in the first column a text-align:center, but it doesn't seem to work. Is there a way to get this to work other than adding a class to every <td>?
<table>
<col class="column"/>
<tr>
...
</tr>
<tr>
...
</tr>
<tr>
...
</tr>
</table>
Give the table a class, e.g. <table class="table1">. Then, in your CSS, you can reference the cells like so:
.table1 tr>td:first-child { text-align:center; }
The class covers the tag it is tied to. Since you're closing the tag before doing anything, the class doesn't end up affecting anything.
Like the other guy said, put it in the table, which spans all the tds.
There's no way to get this to work in all common browsers, but you can use a modern CSS selector to achieve the effect in a standard (if not fully implemented) way.
tr:nth-child(1) { styles }
Where 1 is the first column.
More generally see http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
The common solution is to add a class on each "td" which is usually a non-issue as you're typically generating HTML from other code. I've never seen the col class to which you reference before so did a quick search, and it appears that a) it should be within a colgroup tag and b) it's limited in the styles you can set.
The non-css way is to simply add align="center" to your td of the respective column. This is one way where Dreamweaver saves development time: select the entire column, type in center for align and you're done.
Related
Consider this simple table layout:
<table>
<tbody>
<tr>
<td>Cell1
<td>Cell2
...
<tr>
...
<tbody>
<table>
Consider also that this goes on for 100.000 of lines; a large table.
If I want to style the cells and I have a choice to add a class to each td, or to add a class to the table (or tbody).
version 1
td.some-style {
some definition
}
and add a clase to each and every td
or version 2
table.some-style td {
some definition
}
and merely add a class to the table.
I've come to understand that browser read css right to left. And in version 1 would go an find all td dismissing quite fast the ones that don't have the class, Sounds fast to me. In the second version the browser would also first find all td for each go up a couple of levels and find, or not, the class. The first version however will explode the size of the html code as the class name needs to be copied in each td, in the second case it is only a view bytes. Remember the amount of td is quite larger
What would be best? Can I benchmark this in some way? Oh and rest assured the html is generated, not typed.
There can be no tag between <tr> and <td> in an HTML table. (Is there a tag for grouping "td" or "th" tags?) But is there any way to have such a grouping tag that between <div>s with display: table-row and display: table-cell?
This may seem silly, but the point is that I want to add behavior like #mouseover="doSomething" or :class="{someClass: someCondition}" in a Vue.js application, and I need a tag for that. I don't want to add behavior to the whole row, and to stay DRY I would rather not add it to each cell individually.
Edit: HTML does not offer a solution, but in Vue I was able to get the desired result using vue-fragment. It allows to attach behaviour to the dummy <fragment> tag. Example: MatrixRLabel in MatrixR (Those are the beige labels in the upper matrix in this app.)
display: table-row and display: table-cell applies a certain relationship to the parent and child divs. Just like with <tr> and <td>, adding a div "in between them" obviously disrupts this relationship, and causes results I cannot meaningfully predict without a bit of research.
So yes, you will have to apply the behavior to the desired cells individually.
<tr>
<td #mouseover="doSomething">...</td>
<td #mouseover="doSomething">...</td>
<td>...</td>
</tr>
Alternatively, you can identify those cells with a class and then have the behavior check for that class before executing.
<tr #mouseover="doSomething">
<td class="onlyToMe">...</td>
<td class="onlyToMe">...</td>
<td>...</td>
</tr>
Since you haven't gotten an answer before this, perhaps you've figured something out yourself? Do share if you can. Cheers!
I'm a newb to CSS. I have a page that where an html table is generated at runtime by a bunch of tags. However,data is generated only in one of those cells and the adjacent cells end up being empty.
<tr>
<td> Really long data that is forced to wrap around.</td>
<td> empty cell</td>
<td empty cell </td>
</tr>
Is there a clean(cross browser compatible) way to get the first cell to span multiple columns via CSS without force a wrap around. Ideally, one would set the colspan on the first cell to get it to stretch multiple cells but since the html is generated on the server, this isnt much of an option.
This is the closest set of solution Ive found to my question and it doesnt seem to solve the problem.
Looks like you are trying to use tables for presentation, rather than tabular content. You should give a look into display: flexbox which may help you achieve the effect you want.
Here is a great tutorial https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have a simple table that is burred inside of big HTML file. I do know it has two td elements, the first of which is a header label, like Name and the second is the value. So what I need to do is to get the text of the second td. The problem is HTML is dynamic and the CSS path varies so it inefficient to create a set of CSS paths for each possible case.
It seems like I need to find a tr element that has a td child that has text 'Nameand then take the text of the last child of thattr` element. Something in this direction.
<html>
...
<table>
<tr>
<td>Name</td>
<td>John</td>
<tr>
</table>
...
</html>
I'm fairly sure the CSS dudes decided not to implement a parent selector.
It'd make a really foot gun.
Perhaps you can use some javascript search for and add an 'id' to the table you want to restyle.
I have a table which is OK in web pages, but when printing my table (ctrl+p) it breaks not the way I want. The last row of the first page splits with the part of the row on the first page and the other part of the row on the second page. So, is there any way to overcome the problem, the rows can have different content and size. I also tried this properties
page-break-before/after: auto. page-break-inside:avoid;
but with no result. Is there any way to break the table and move the part of the table to the next page without splitting the last row into two parts for print media? Any help will be appreciated.
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<th><span>Firstname</span></th>
<th><span>Lastname</span></th>
<th><span>Points</span></th>
</tr>
<tr>
<td><span>Jill</span></td>
<td><span>Smith</span></td>
<td><span>50</span></td>
</tr>
<tr>
<td><span>Eve</span></td>
<td><span>Jackson</span></td>
<td><span>94</span></td>
</tr>
<tr>
<td><span>John</span></td>
<td><span>Doe</span></td>
<td><span>80</span></td>
</tr>
/*here I have many <tr> elements*/
</table>
</body>
</html>
If I understand correctly, you want your table to break only between rows and not within them. You can accomplish this in Firefox and Internet Explorer with the following css rule:
tr {page-break-inside: avoid;}
Unfortunately, that doesn't work in other popular browsers, such as Chrome.
As has been suggested, you can prevent page breaks within the content of an individual cell by wrapping it in a div that has "page-break-inside: avoid;" set on it, but if the content height varies within the row, you'll still end up with parts of the row on two different pages.
If you really want to solve this problem and are willing to throw some javascript at it, I have posted a solution here that should do the trick.
You can request a page break, which will be invisible on the screen, but will force the element to a new page when you print. But the rules are more subtle than you might expect.
The CSS property page-break-before:always can only by applied to a block element. Not an inline, or anything odd like a table-row or a list-item. So do not style the row or cell, nor even a <tbody> or a <br/>. And it cannot be an element that the browser is allowed to omit, so you cannot just throw in an empty <div> with the style on it. One has to add a <div> or <p> around the first cell contents, for instance, to give the style.
Likewise page-break-after:always can be applied to something similar at the end of the previous row. I find this totally annoying, as what I always want to protect is a row, or a grouping.
Some browsers may also want you to change the style of your table to page-break-inside:auto, as the default style for a table is often already page-break-before:avoid.
Since it is the default style, adding it does not help. The browser is already avoiding breaking your table as much as it is willing to. But failing to remove it easily makes the other options useless, especially in Chrome.