How can I define some general properties for the columns of a table? For example, in the following table I have 2 columns. I want the left column to have a width of 30px and the right column a width of 70px. For the example below I'm writing a CSS class name in every row. Is there a way that I can do it in a more general way? Thanks.
<table width="100px" cellspacing="0">
<tbody>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
</tbody>
</table>
it suffices to define the first TD's... it looks like:
<table width="100px" cellspacing="0">
<tbody>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
</tbody>
</table>
And in following, Im writing css class name in every row. Is there a way that I can do it in more general way?
I assume you mean "... in every column". No, if you want cross-browser support, this is currently indeed the only way to do it.
In CSS 3, there is the :nth-child pseudo-class, but it is fully supported only by FF >= 3.5 and Chrome.
Just define classes for td in first row. See example.
Use <th> tags for the first row of the table and then you could have:
th.left {
width: 30px;
}
th.right {
width: 70px;
}
You can use <col> elements to define widths for a column at a time. Something like
<table>
<col class="left">
<col class="right">
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
</table>
Note, though, the styles you can set are quite limited -- so far, only width and background-color work for me (in Chrome 9). So if you have anything else set for the class (font sizes, text colors, alignment, etc), you might want to stick to keeping the class on each <td>.
Related
I have a table with some <td>s, and a couple of them have rowspan attribute. I'm trying to select the very last one in the table, neither last-child nor last-of-type works.
Here is a jsfiddle: https://jsfiddle.net/p2cjwvj5/
<table class='myTable' border='1'>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td rowspan='3'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</table>
.myTable [rowspan]:last-of-type {
color: red;
}
I'm trying to to select the cell that contains "HEADER2".
Is this possible? I know I can work around it by tagging the last rowspan with another class, just wonder if there is a cleaner method. Thanks!
You can wrap each group of <tr>s into a <tbody>, then select the last tbody by either using :last-of-type or :last-child would be fine.
.myTable tbody:last-of-type td[rowspan] {
color: red;
}
<table class='myTable' border='1'>
<tbody>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan='3'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</tbody>
</table>
If you don't want to add more <tbody>s, you could always just put a class on the last rowspan-ed table cell, like:
.myTable .lastRowspannedCell {
color: red;
}
<table class='myTable' border='1'>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td rowspan='3' class='lastRowspannedCell'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</table>
I don't know the structure of your back-end code, so that's assuming you can know up-front if a group is the last group.
As a bonus, not using the :last-of-type/:last-child selector nets you better IE8 compatibility, if you care about that.
I have a responsive table where the end column shows money figures. Currently it looks like this:
But I want it to do this:
There may not be any data so the £ sign will be replace with N/A which should also be pulled to the right of the column.
The data is fetched from MySQL but here is a simplified snippet of my code:
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'>Budget: £123,456</div>
<div class='text-right'>Value: £200,000</div>
<div class='text-right'>Spent: N/A</div>
</td>
</tr>
</tbody>
Divs are useful but Ii don't think that be the best solution for this case maybe you need to use better the table properties
http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th colspan="2">Money</th>
</thead>
<tbody>
<tr>
<td rowspan="4">#1234</td>
<td rowspan="4">Josh Blease</td>
<td rowspan="4">Needs a new filter fixing</td>
</tr>
<tr>
<td>Budget</td>
<td>£123,456</td>
</tr>
<tr>
<td>Value</td>
<td>£200,000</td>
</tr>
<tr>
<td>Spent</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'><span>Budget:</span> £123,456</div>
<div class='text-right'><span>Value:</span> £200,000</div>
<div class='text-right'><span>Spent:</span> N/A</div>
</td>
</tr>
</tbody>
and
#mytable tbody tr td .text-right span{
min-width:200px;
max-width:300px;
display: inline-block;
}
Spans need to be set as inline-block otherwise the width properties won't take hold as they are by default inline only elements.
Setting the min and max width will force the span container to not go below or above a certain point, meaning that your other text will be forced to stay to the left of the (example) 200px mark even if your initial text (as in spent) only ends up being (again, example) 80px
I have the following HTML:
<tr>
<td class="column-text">column 1</td>
<td class="column-text">column 2</td>
<td class="column-text">column 3</td>
<td class="column-text">column 4</td>
<td>last column has no class</td>
</tr>
Note that the number of cells with class "column-text" is dynamic.
I have the following CSS:
tr td.column-text:last-child {
color: red;
}
Note that this selector seems not working.
What is the right CSS selector for the last <td> with class "column-text"?
Thanks and regards.
UPDATE 1
Just wanted to share this, which is puzzling to me. The following is working!
tr td.column-text:first-child {
color: red;
}
But as said in the post, I hope to apply styles to the last cell with the given class.
UPDATE 2
Here is what I did to solve this problem after realizing there is no direct CSS solution based on the input from helping folks. When generating the dynamic html, I added a special class to the last <td> with "column-text" class.
Thanks to all folks who rushed to help!!!
HTML
<table>
<tr>
<td class="column-text">column 1</td>
<td class="column-text">column 2</td>
<td class="column-text">column 3</td>
<td class="column-text">column 4</td>
<td class="column-text">column 5</td>
<td class="column-text">column 6</td>
<td class="column-text">column 7</td>
<td class="column-text">column 8</td>
<td class="column-text">column 9</td>
<td>last column has no class</td>
</tr>
</table>
CSS
tr td:nth-last-child(2){
color:red;
}
This will expect there to be exactly only one td sibling at the end without the class column-text.
Fiddle
I don't think you can do it with CSS. Here's a jQuery solution if you're interested:
$('td.column-text').eq($('td.column-text').length-1).css({color:'red'});
last-of-type may have worked but it doesn't work with class names. If you don't mind, you may use:
$("td.column-text").last().css("color", "red");
JSFiddle
Here is a CSS solution
td.column-text:nth-last-child(2) {color: red;}
I think you are looking an answer something like this example. See here
As folks here indicated, there is no pure-CSS solution for this. What I did is to simply add a new class ("last-column") to the last with the given class. Something like the following:
<tr>
<td class="column-text">column 1</td>
<td class="column-text">column 2</td>
<td class="column-text">column 3</td>
<td class="column-text last-column">column 4</td>
<td>last column has no class</td>
</tr>
The above html is generated dynamically and I am able to know which one is the last td with "column-text". I feel this way is better than using Javascript.
Cheers.
I have following table in my site but for some reason the style width:100px does not work for td. Probably some other css is preceding. I have also tried !important but it still doesn't work.
What can I do to get the width to precede all else?
<table>
<tbody>
<tr>
<th>Resurs</th>
<th>Service</th>
<th>Datum</th>
<th>Tid från</th>
<th>Tid till</th>
<th></th>
</tr>
<tr>
<td style="text-align:left">Resource</td>
<td style="width:100px;word-break:break-all">kjslkjfsdjfj sfjlsjfklsljf slfj lsjfs flsj fkljskf lksj fsjf sdlfj lsjföslajfölsjföl afö aölfjas fasöfj </td>
<td>2015-02-22</td>
<td>10.00</td>
<td>11.00</td>
<td>sdfdsf</td>
</tr>
</tbody>
</table>
Does anyone know how I can get the width to work?
Check this jsfiddle
<table>
<tbody>
<tr>
<th>Resurs</th>
<th>Service</th>
<th>Datum</th>
<th>Tid från</th>
<th>Tid till</th>
<th></th>
</tr>
<tr>
<td style="text-align:left">Resource</td>
<td style="width:330px;word-break:break-all">kjslkjfsdjfj sfjlsjfklsljf slfj lsjfs flsj fkljskf lksj fsjf sdlfj lsjföslajfölsjföl afö aölfjas fasöfj </td>
<td>2015-02-22</td>
<td>10.00</td>
<td>11.00</td>
<td>sdfdsf</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/vjka7b5j/
its working properly ,
Im trying to insert an image to a Table :before class by calling the first child on the table. The table has a few different classes and a few duplicates. The class Im trying to work out is
td.familyHeader.foldedlabel.Apple:first-child
which has a few duplicates, and the first-class removes all of them. How can I call only the first one?
The html:
<tbody>
<tr>
<td colspan="10" class="familyHeader foldedlabel Apple"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel Apple"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel Apple"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel"></td>
</tr>
</tbody>
you can use below example to create your own code. It will work.
<style>
table td.aaa {
background:#000;
color:#fff;
}
table td:first-child.aaa {
color:#ff0000
}
</style>
<table>
<tr>
<td class="aaa">1</td>
<td class="aaa">1</td>
<td class="aaa">1</td>
<td class="aaa">1</td>
<td class="aaa">1</td>
</tr>
</table>
If i understand your question correctly:
Because each td is the only child in each tr - it will always be the first child in your selector.
instead you need to select the first tr and then the td within that
The selector you need will be:
tbody tr:first-child td.Apple
I used the selector tbody tr:nth-child(1) td.Apple.
You can find an example here: jsbin.com.