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. […]
Related
Dear css experts: In my field, it is common to denote statistical significance with *'s on the numbers. I know I could put all stars in their own td field and then use css so that numbers are aligned, but I was wondering if this can be done in native css. the intent is to have an ability to realign numbers:
<html>
<head> <style type="text/css"> td { text-align:right; } </style> </head>
<body>
<table>
<tr> <th>c</th> </tr>
<tr> <td>1</td> </tr>
<tr> <td>11</td> </tr>
<tr> <td>111</td> </tr>
<tr> <td>1111</td> </tr>
<tr> <td>11<sup style="text-width:0pt">**</sup></td> </tr>
</table>
</body>
possible?
Yes, it’s possible, and it’s a novel idea (at least new to me). The idea is apparently to have a column with numbers, aligned to their last digit, but with one or more characters (here, asterisks) to the right of some numbers. Wrapping those characters to an element, setting the element’s width to zero, and letting the content overflow (overflow: visible, the default) does the job. However, the width needs to be set using the width property, which has no effect on inline (text-level) elements, and sup is inline by default, so this needs to be fixed by making it an inline block (which is affected by the width property):
<style>
td { text-align:right; }
.after { display: inline-block; width: 0; }
</style>
...
<tr> <td>11<sup class=after>**</sup></td> </tr>
I have used the same markup as in the question. However, the sup element has several technical problems (e.g., it may cause line misalignment), so I would use span instead. You can style it in superscript style if desired. But e.g. Chicago Manual of Style, clause 3.78, uses simple asterisk “*” characters in text in this context, with no attempt at raised position or reduced font size. The point is that in any many commonly used fonts, the asterisk itself is, by typographic design, superscript-like: above the baseline and relatively small.
Here’s a screenshot of a test that uses this technique, first with sup, then, on the last row, with span. The font is Cambria.
If I understand you correctly, you want to add '*' via css. You can do this:
td:after {
content: '*';
font-size: .8em;
vertical-align: top;
}
DEMO
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?
<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;
}
I have a web app that uses bootstrap to make it mobile friendly.
In an attempt to visually group 3 items together, I have created a class the puts a box / border around the table cell where these three items appear. (the three items are link4, 5 and 5)
Here's the class:
td.lights
{
border: 2px solid black;
}
And here's the problematic HTML - I've paired it down to the minimum code, just for demo purposes.
What I'm noticing is that when I simulate a mobile device (using Firefox's Responsive design view tool) the bottom of the
<table>
<tbody>
<tr>
<td>link1</td>
<td>link2</td>
<td>link3</td>
<td> </td>
<td class="lights">link4 / link5 / link6</td>
</p>
</tbody>
</table>
Immediately after this table, I have this code to create another table:
<P>
<table class="table table-bordered table-striped">
<thead>
etc...
</thead>
</table>
When i resize my browser, the border on the bottom of my in table 1 gets cut off, depending on how small by browser size gets. The other fields look fine, but then again, they don't have a border around them. To me, it looks like there's a fixed set of space above and below my text ("link4 / link5 / link6") that is not dynamically changing.
I've tried adding a height "dynamic" height property to my td like so:
td.lights
{
border: 2px solid black;
height: 1em;
}
But that didn't resolve my problem.
Any suggestions? Please and thanks!
As far as I can tell you have quite a few errors in your markup:
</p>
Should be:
</tr>
Also, should you have a:
<P>
Before your second table? I would avoid wrapping your tables with P tags as this will add unwanted padding and doesn't make sense from a semantic perspective.
Fix those first and see what happens. Secondly I would recommend - when dealing with tables - to use the following:
<table cellpadding="0" cellspacing="0" border="0">
You can also do this in CSS with the following:
table, tr, td { margin: 0; padding: 0; border: 0; }
This should make sure you have no unwanted padding in and around your cells.
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.