I open this post after I looked at this post without success: How to set table column widths to the longest value, excluding header
I want to draw a table, and I want that the width of each column will be compatible to the longest text in this column. For example, if the following values lie in column A: "abc", "abcd", "abcde", the width of column A will be 5 characters long.
I tried:
td {
white-space: nowrap;
overflow: hidden;
}
How can I do it?
I think that's the default behavior of tables. Have made a simple table that just behaves as you want it (refer this JSFiddle). The column width is equal to the longest text in them.
<table>
<thead>
<th>Column A</th>
<th>Column B</th>
</thead>
<tbody>
<tr>
<td>abc</td> <td>abcdefghijklm</td>
</tr>
<tr>
<td>abcdefghijklmno ddsp</td> <td>ab</td>
</tr>
<tr>
<td>ab</td> <td>ab</td>
</tr>
</tbody>
</table>
Not sure if you wanted to ask something else ?
Add this styling to your table and td:
table {
table-layout:fixed;
}
td {
width:1px;
white-space:nowrap;
}
If this doesn't work, make sure that these are the only styling attributes being set to your table and td. This will help you figure out if other styling attributes are causing conflicts ruining the mentioned styling you want to achieve.
On a similar issue happened with me, these styling attributes weren't working with me because I was setting width attribute to the table with them. When I removed it, everything worked good as expected.
A quote from the original post I got the solution from:
If the text is non wrapping text then you set the cell to width:1px and use white-space:nowrap. The text in that column will then determine the width of the cell.
It's a technique commonly used for images and captions (without the white-space:nowrap) and allows text to wrap at the limits of an image automatically.
Try styling the text to not wrap:
{
white-space: nowrap;
overflow: hidden;
}
And do not set width settings on your table, tr and td elements.
See if that works.
JSFiddle: https://jsfiddle.net/dc9wdwem/
I inherited a legacy application that some clients are still using and expecting upgrades for. One recent upgrade "broke" the existing CSS and the easiest way to resolve it is to "un-break" just one little table.
The markup is nested table upon nested table. But for the sake of stripping down to the bare essentials, here's the barest version of where to find my table.
<div id="someId">
<table>
<tr>
<td>
<table>
<tr>
<td>
<table> <!-- not this table --> </table>
</td>
<td>
<table> <!-- THIS ONE!! --> </table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
There are other tables and rows and cells scattered throughout, but this structure gets you there.
Using the "direct descendant" symbol is tricky because the tables are descended within rows and cells as well as other tables. So table>table>table isn't going to do it. But then if you go with a general descendent selector, you end up selecting too many things table table table will get you a whole bunch of tables. Here's the closest I got so far:
#someId>table table td:nth-child(2) table {
background-color: red;
}
I would normally be glad to add even more > selectors; however, I believe the browsers themselves are filling in tbody elements and so forth and I don't know that I can reasonably predict that the proper structure will always be intact. The above selector is selecting more tables than the one I'm trying to isolate.
None of the nested tables have IDs or classes, and nor do I have the opportunity to add them in. The upgrade process does not upgrade the customer's markup, which they may have themselves partially customized over time.
Anybody have any CSS selector magic that will work, assuming the above markup alongside browser-filled elements like tbody?
This will work for the specific HTML in your fiddle:
#someId>table table:nth-of-type(1) td:nth-of-type(2) table {
background-color: red;
}
Obviously, if the HTML changes in pretty much any way, this is probably not going to work.
You missed a Table in your css.
try:
div#someId > table table table td:nth-child(2) > table
https://jsfiddle.net/ba52Lwkg/
#someId > table table:first-of-type td + td > table
this should work.
https://jsfiddle.net/dc9wdwem/
I have a nice working grid view but I want to have a <hr> tag between every row.
My GridView has 2 columns, so it will be rendered as:
<table>
<tr><td>x</td><td>y>/td></tr>
<tr><td>x</td><td>y>/td></tr>
</table>
I want to have:
<table>
<tr><td>x</td><td>y</td></tr>
<tr><td colspan="2"><hr></td></tr>
<tr><td>x</td><td>y</td></tr>
</table>
try to use AlternatingRowStyle intelligently to acheive this. IMHO there no straightforward way of doing it.
If i understand your question, you are expecting a line for each TR.
Why dont you try with CSS
tr { border-bottom:2px solid #eee;}
or
tr td { border-bottom:2px solid #eee;} /* border for all tds and not tr */
The GridView does a lot, but when you want finer-grained control over the layout, a Repeater can offer more.
The linked page includes an example showing how you can create the entire HTML table within the Repeater, starting with the header template, continuing in item templates, and ending in the footer template. It doesn't take much to set up and can be very powerful.
To my surprise I just found out that applying text-alignment to a table column is fairly bad supported in current browsers. Neither Firefox 3.5.2, Safari 4.0.3 or IE8 shows the "amount" column below as right aligned.
HTML:
<table class="full_width">
<caption>Listing employees of department X</caption>
<col></col>
<col></col>
<col></col>
<col class="amount" width="180"></col>
<thead>
<tr>
<th>Name</th>
<th>Phone number</th>
<th>Email</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>+45 2373 6220</td>
<td>john#doe.com</td>
<td>20000</td>
</tr>
</tbody>
</table>
CSS
.amount{
text-align: right;
}
Why isn't this working? Also I tried (via firebug) to turn off Firefox' native rule that left-aligns TD elements, but that didn't work either.
I can see that setting background color rule in the amount css class actually works. So I know that the .amount class is applied to all columns:
CSS
.amount{
text-align: right;
background-color: aqua;
}
The CSS 2 spec apparently says that only four attributes are supported by col element -- see Why is styling table columns not allowed?
Criteria for selecting the best solution: must be supported fairly cross-browser (not necessarily in IE6 where I could live with using jquery or a conditional comment to include a specific solution). Also, I expect to apply multiple classes multiple different columns (ie. class="amount before_tax")
I'd hate to set classes on the relevant td in each row. What are my options?
I'd hate to set classes on the
relevant td in each row. What are my
options?
That would be it: class on each td.
If you don't want to add the class to each cell in a column manually, your only other option is to use javascript to do it.
With jQuery:
$("table tbody tr td:eq(3)").addClass("amount");
You can always set a class on on the last element in a row:
.full_width td:last-child {
text-align: right;
}
you have to set the class on the td elements. I think that's the only way.
Your answers got me thinking about creating a JQuery script that parses COL elements. Then it should find each row matching the corresponding COL and apply the COL class to each element like so:
enter code here$("table tbody tr td:eq(3)").addClass("amount");
But only do it, (as a performance improvement), if the class definition contains a text-align in it.
Of course, a full complex implementation of colspan and COLGROUP elements will be overkill and most likely not supported.
Any thoughts on that idea?
What CSS should I use to make a cell's border appear even if the cell is empty?
IE 7 specifically.
If I recall, the cell dosn't exist in some IE's unless it's filled with something...
If you can put a (non-breaking space) to fill the void, that will usually work. Or do you require a pure CSS solution?
Apparently, IE8 shows the cells by default, and you have to hide it with empty-cells:hide But it doesn't work at all in IE7 (which hides by default).
Another way of making sure there is data in all cells:
$(document).ready(function() {
$("td:empty").html(" ");
});
If you set the border-collapse property to collapse, IE7 will show empty cells. It also collapses the borders though so this might not be 100% what you want
td {
border: 1px solid red;
}
table {
border-collapse: collapse;
}
<html> <head> <title>Border-collapse Test</title> <style type="text/css"> td {
border: 1px solid red;
}
table {
border-collapse: collapse;
}
<table>
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td />
</tr>
</table>
The question asked for a CSS solution, but on the off-chance an HTML solution will do, here is one:
Try adding these two attributes to the table element: frame="box" rules="all"
like this:
<table border="1" cellspacing="0" frame="box" rules="all">
I just found the following. It's standards compliant but it doesn't work in IE. sigh.
empty-cells: show
I happened across this question and haven't seen any answers that really addressed the issue.
The problem results because IE7 does not see any internal content for the cell; in programming terms the cell is resulting as a null and like most things, you cannot border a null or perform any action on it. The browser needs an element/object that has a layout, in order to apply a border/layout.
Even empty <div></div> or <span></span> do not contain content, thus there is nothing to render, resulting in that null case again.
However, you can trick the browser into thinking the cell has content, by giving the empty div/span layout properties. The easiest way is to apply the CSS style zoom:1.
<table>
<tr><td>Foo</td>
<td><span style="zoom:1;"></span></td></tr>
</table>
This workaround is better than using a , since it doesn't unnecessarily mess up screen readers, and isn't misrepresenting the value of the cell. In newer browser you can use the empty-cell:<show|hide> alternative.
Note: in lieu of Tomalak's comment, it should be understood that hasLayout has nothing to do with null, it was merely a comparison of how the browser interacts and renders hasLayout similarly to how a database or programming language interacts with nulls. It is a strech, but I thought it might be easier to understand for those programmers turned web designers.
Ideally, you shouldn't have any empty cells in a table. Either you have a table of data, and there's no data in that specific cell (which you should indicate with "-", or "n/a/", or something equally appropriate, or - if you must - , as suggested), or you have a cell that needs to span a column or row, or you're trying to achieve some layout with a table that you should be using CSS for.
Can we have a bit more detail?
This question's old, but still a top result in Google, so I'll add what I've found:
Simply adding border-collapse: collapse to the table style fixed this problem for me in IE7 (and didn't affect the way they're displayed in FF, Chrome, etc).
Best to avoid the extraneous code of adding an or other spacing element when you can fix with CSS.
I guess this can't be done with CSS;
You need to put a in every empty cell for the border to show in IE...
empty-cell only fixed Firefox (YES I really did have this issue in Firefox) IE 7 & 8 were still problematic..
This worked for me in both Firefox 3.6.x, IE 7 & 8, Chrome, and Safari:
==============================
table {
*border-collapse: collapse;}
.sampleTD {
empty-cells: show;}
==============================
Had to use the * to make sure the table style was only applied to the IE browser.
Try this if you can't use non-breakable space:
var tn = document.createTextNode('\ ');
yourContainer.appendChild(ta);
I create a div style that has the same font color as the background of your cell and write anything (usually a "-" "n/a" or "empty") to give the cell content. It shows up if you highlight the page, but when viewed normally looks how you want.
I use a mix of html and css to create cross browser table grids:
html
<table cellspacing="1" style="background-color:#000;" border="0">
css
td{background-color:#fff;}
I haven't seen any issues with any browsers so far.
"IE" isn't a useful term in this context anymore now that IE8 is out.
IE7 always does "empty-cells:show" (or so I'm told ... Vista).
IE8 in any of its "Quirks" or "IE7 Standards" modes always does "empty-cells:hide".
IE8 in "Standards" mode defaults to "empty-cells:show" and supports the attribute via CSS.
As far as I know, every other browser has correctly supported this for several years (I know it was added in Firefox 2).
I'm taking this from another website but:
.sampletable {
border-collapse: collapse;}
.sampleTD {
empty-cells: show;}
Use for the CSS for the table and TD element respectively.