CSS: make Row background span accross all columns? - css

I have a row <tr> that has a few columns <td> in it. I have a background image set to the <tr> but it restarts the background image for each <td> as if it were individually set for each <td>. I would like the one image to span across the background for all the columns in that row.
Is there a way to do that?
here is my code:
<tr bgcolor="#993333" style="color:#ffffff; background:url(images/customer_orders/bar.gif) no-repeat;">
<td><strong>Product(s)</strong></td>
<td width="7%"><div align="center"><strong>Qty</strong></div></td>
<td width="11%"><div align="center"><strong>Total</strong></div></td>
</tr>
Thanks!!

It won't change anything if you replace background-repeat property with 'repeat'.
The fact is TR does not support backgrounds and you must do it different way.
If you can use divs - go for it. If you must use table, move your header to seperate table and apply background to this new header-table. This is not perfectly correct but will do the job. If I was you I would use bar.gif graphic that I can repeat-x across all header tds.
<table style="background:#993333 url('images/customer_orders/bar.gif'); color:#fff;">
<tr>
<th>Product(s)</th>
<th>Qty</th>
<th>Total</th>
</tr>
</table>
<table>
<tr>
<td>data1</td>
<td>tdata2</td>
<td>data3</td>
</tr>
</table>

You will probably have to set the background position separately on each <td>. <tr>s don't support most css properties.
For example, in the simple case where left and right columns are equal widths:
tr td{ background-position: center; }
tr td:first-child { background-position: left; }
tr td:last-child { background-position: right; }
This obviously gets much more complex when you the widths are different, and in your case with % widths, you would probably have to do some javascript to get the actual location of the middle column.

Related

Why does my alternate row background color not work for my table?

I am using the following CSS and HTML:
table.grid tbody tr:nth-child(odd) {
background: #888;
}
<table class="form grid">
<tbody>
<tr>
<td>xx</td>
</tr>
<tr>
<td>xx</td>
</tr>
<tr>
<td>xx</td>
</tr>
<tr>
<td>xx</td>
</tr>
</tbody>
</table>
The table shows up fine but there is no different background color shading for the rows. Am I missing something?
Try adjusting your CSS selector to table.grid tbody tr:nth-child(odd) td {.
This may help in case you have other CSS in your document affecting the background property of td elements, while also allowing you to do column-specific styling (e.g. for sorting). I find this preferable to applying the background property to tr elements.
Here's a Fiddle demonstrating that this should indeed work with your CSS unless something else in your CSS is affecting it.
This question has been answered several times before. There are known compatibility issues with CSS3 and IE which are known to break the nth-child selector. You may have to use JQuery to do it instead. Here is some info which may help
Alternate table row color using CSS?

th and td width are different

I am trying to have my table header be static, but whenever I do this the th and the td widths end up changing. I am doing all of this using CSS. The way that I am making the table header static is by making its position fixed.
I have tried setting the th and td widths to be the same, but that doesn't work.
#idOfHeader th { width: 20px; }
#idOfBody td { width: 20px; }
I dont' see why you'd have to use min-width, max-width or <col>. I think the likely cause of the different widths is either that there is content somewhere forcing a cell to be wider than desired, or the tds and ths have different padding. The total width of a cell is its width plus its padding.
Unless the padding is specified somewhere, the browser's default paddings will be applied and I guess the padding of the th is likely to be bigger than that of the td
th,td{
width:20px;
max-width:20px;
min-width:20px;
}
maybe your padding makes such difference
Use col tag in html
<table border="1" width="100%">
<col width="100">
<col width="50">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
fiddle

Stop td making other tds above and below same width

How can I stop a td with lots of text making the td above it the same length?
In this example the outline for the cell containing '1' shows its as wide as the cell containing 'long text here'. What I want is for the cell containing '1' to only be as wide as it needs to be to fit the text it contains.
Can this be done with CSS?
http://jsfiddle.net/r7yXD/1/
<table>
<tr>
<td>1</tRund>
<td>2</td>
</tr>
<tr>
<td>long text here</td>
<td>.</td>
</tr>
</table>
td {
border: 1px solid red;
}​
So looking at the image below, the first example is what happens and I understand why, but can I make the 2nd option happen instead with CSS?
​
You can't. Its the nature of a table to make the td's the same width.
You could however add additional td's and use colspan="2", but to be honest, if you need to do such a thing, especially for texts, you probably shouln't be using tables.
Have you tried something like this
<style type="text/css">
td {
border: 1px solid red;
}​
</style>
<table>
<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="2">long text here</td>
<td>.</td>
</tr>
</table>
As stated in the comments this is not possible using a <table>-element. You can read more about it here at w3.org: "17.5 Visual layout of table contents".
It says:
The visual layout of these boxes is governed by a rectangular, irregular grid of rows and columns. Each box occupies a whole number of grid cells, determined according to the following rules.
And interesting for your case is from rule number 5:
[…] Each cell is thus a rectangular box, one or more grid cells wide and high. […]

CSS: Left align contents of TD where INPUT exists

I am trying in CSS to left align the contents of a TD cell when there is an Input in it. The Input should be left aligned. Is this possible?
<td> <input ....Left Align Me... /></td>
It looks like you are making a basic form, probably with labels in an adjacent cell. If so, I'd use the <th> (table column header) tag for the labels like so:
CSS:
#tableId td {text-align: left; }
#tableId th {text-align: right; font-weight: normal}
HTML:
<table id="tableId">
<tr>
<th>Label</th>
<td><input id="test"></td>
</tr>
</table>
If your table is more complex the next easiest way would be to simply add a class name to the cells you want to left-align to target them in your stylesheet.
td input {
float: left;
}
It's not exactly what you want, but it's as close as you're gonna get with pure CSS.

Fixed width table -- with different width cells?

<table>
<tr>
<td>One</td>
<td>Two</td>
<td class="skinny">$$</td>
<td>Four</td>
</tr>
</table>
I'm trying to make all of the tds the same width, except for the one with class 'skinny'. I can't seem to change just the skinny one though.
http://jsfiddle.net/tZHgV/
I'm trying to make the table look like this:
| One | Two |$$| Four |
where one, two, and four are the same width. How can I change just one class of tds' width?
Change your CSS to this
.skinny {
width: 5px;
min-width: 5px;
}

Resources