I've got a <table> that contains a few columns whose textual value can be too long, therefore I wan't to "trim" them using "text-overflow: ellipsis" and "overflow: hidden" on the <td>'s in CSS. I noticed that in order for me to do that I have to set "table-layout: fixed" on the <table> which then forces me to specifically set every single column's width.
I didn't want to apply a bunch of class names or IDs to the columns, so I used the following CSS solution:
#error-list th:nth-child(1),
#error-list th:nth-child(6) {
width: 53px;
}
#error-list th:nth-child(2) {
width: 131px;
}
#error-list th:nth-child(3) {
width: 226px;
}
#error-list td:nth-child(3),
#error-list td:nth-child(4) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
The column list is fixed, so it isn't a big deal that I'm using the column's ordinal to style it, and I'm happy that the markup is leaner. This solution works great, but I wanted to ask whether there is a better solution.
In order for the above to work, I had to set the column width's such that it took account for padding and border as well. That way it would work in IE, Chrome and FF. It feels pretty nasty doing it this way, but when I tried using "-webkit-box-sizing: content-box" (so I could set the column widths without having to also worry about padding/border), Chrome didn't respect it.
Am I doing something wrong? Is there a better way? I don't mind having to hard-code every column width, but I hate having to use the border-box box-sizing.
I'm not sure if this is what you're looking for, but this is what I came up with:
http://jsfiddle.net/e7ZKq/1/
If you set a max-width to your td rule along with your other properties, the cells will fit to the content until you hit that max width and then it will cutoff the remainder with the ellipsis.
Related
I'm working on an interface and this thing is bugging me.
Please see: http://jsfiddle.net/NUKxX/
It works in Chrome but not in Firefox. The basic idea in Chrome is that the longest word in each columns stretches the td or th to appropriate length in order to preserve space. But in Firefox input elements seem to completely ignore max-width and min-width.
I tried fiddling around with position:absolute on the input and position:relative on the th but Firefox ignores the latter mentioned as well.
How do I make it work?
th input {
min-width: 10px;
max-width: 100%;
width: 100%;
}
Correct the problem here (FF 17.0.1).
Fiddle: http://jsfiddle.net/Regisc/PcKMJ/
I try to adjust table column width ('Author' column on the next link http://deploy.jtalks.org/jcommune/branches/1?lang=en).
I have added the min/max attributes to .author-col style:
#topics-table .author-col a {
font-size: 11px;
min-width: 140px;
max-width: 140px;}
However, target column still has 418 px width. I don't see any other overriding width styles. Could you help me to solve this issue and thank you for any advices.
min- and max-width aren't specified for tables. quotig the w3c:
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
if you want to achive a fixed width for your colums, you might want to try using table-layout: fixed; on your table - but please note that this will fix all other columns to their given width, too.
EDIT:
taking a look at your example again, it seems to be much more simple in your case: you havn't given a width to your table cells but the a contained in them. change your css to this:
#topics-table .author-col a {
font-size: 11px;
/* widths are useless here, because an <a> is an inline-element */
}
#topics-table .author-col {
/* give your .author-col a width instead */
width: 140px;
}
I have a table where th <td> are styled as follows.
table.tvTable td{
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap; // with this line i get one erally wide row
padding: 3px;
}
Individually, they are styles with width (both in px, % and *). I also tried to set the width of the whole table too (which don't want to do beccause i want one of the columns to utilize maximum width available on the screen).
However, no clipping occures, let alone ellipsisation. I'm on Ch and FF.
Here's a demo of how I got it working. You indeed have to use table-layout: fixed as was mentioned. Setting the width of the td via CSS seems to work, as well, without having to specify it in the HTML.
Please let me know if you have any questions!
Unfortunately you have to use table-layout: fixed; AND set your table a width.
Probably not the best title I've ever written, but I find it hard to formulate this question well. I'm working on a div that should cover 100% of the parent (could be body). This div should have a variable number of children, so every time the page is refreshed the children count can vary from one to ten, maybe more.
I want these children to all be equally wide and have a percentage width. So if there are five children, each child should have width: 20%. If there are two children, they should have width: 50%. I could do this with JavaScript, but I'd really prefer keeping all layout stuff in the css.
Is there a way to accomplish this without using tables?
Use display: table, display: table-cell, and table-layout: fixed.
See: http://jsfiddle.net/thirtydot/ZKXrM/
table-layout: fixed is to equally distribute the available width between any cells without an assigned width.
This works in all modern browsers. It doesn't work in IE7. If you need this to work in IE7, either use JavaScript to polyfill, or use a real <table>.
CSS:
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.container > div {
display: table-cell;
border: 1px dashed red;
}
HTML:
<div class="container">
<div>1</div>
<div>2</div>
..
</div>
You could define something like
div#contains2 div
{
width: 50%;
}
div#contains3 div
{
width: 33%;
}
and so on, then apply the appropriate class to the parent div.
That said, is there a good reason why you're avoiding a table, but trying to recreate how a table works? Sure, it may not be the absolute nicest "sleep-well-at-night" way to make a page, but if the table does the job how you want it doing, and you can't think of anything else that does, go with the table.
The bottom line is that you have essentially 3 options for automatic same-width columns:
Tables, which do it out of the box and will work cross-browser with no major issues
jQuery, which will probably work cross browser, provided the user has JS enabled
CSS like I suggested above, which adds bloat to your CSS file, and fluff to your markup
You can divide the total width (100%) into the number of items (X). So W = 100/X and W=Width.
here is the code i'm having a problem with:
http://jsfiddle.net/crptS/
Basically I have a table, and the width of the table is 100%
table
{
border: 1px solid #ffda95;
border-collapse: collapse;
width: 100%;
}
now I have 1 column which contains 3 icons and I dont want this column to scale with the page. it should have a width of 25px. the td has the class tdmaxwidth60
.tdmaxwidth60
{
width: 25px;
min-width: 25px;
max-width: 25px;
}
however. in Firefox and IE this column still scales with the page, be it slightly different than in jsFiddle. it looks like the width is working (on load width is correct) and the min-width too works, when you have the page fullscreen and you make it smaller it stays the same width. however when you load the page on a small page and then make it fullscreen the width of the column does stretch.
any ideas how to fix this?
In the jsfiddle you posted 4 columns have fixed widths. Therefor they all scales to suit that width of the table.
If you only set the width of the first column then the other columns will scale to fit. And the first column will stay the same.
When you're saying you've got a column you do not want to scale, shouldn't you give your trmaxwidth60 class to every td within that column instead of the tr? Please correct me if I'm wrong.
you can use white-space: nowrap; for the .trmaxwidth60. Of course the default use is for text, but I think will do the job for the icons also.