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;
}
Related
I'm trying to create a table that has a width of 100% of the parent container, and the td's each are sized automatically on screen size, which is all working fine.
Only the max-width property is ignored on the td. It is scaling to more than 150px. The min-width is working fine.
What am I doing wrong?
I have the following css:
table {
table-layout: fixed;
width: 100%;
}
td {
min-width: 60px;
max-width: 150px;
height: 40px;
}
Edit:
Working example: https://jsfiddle.net/7ez2hmy6/1/
We need an example to answer the right way :)
My guess : if the cell content is larger than 100px (whith a white-space: nowrap, for example), the navigator will still keep the width of the content.
Perhaps adding a overflow-x: scroll would resolve, but it would add a scrollbar when the length will be greater
https://developer.mozilla.org/fr/docs/Web/CSS/overflow-x
EDIT
With your example, I see one drawback: you ask the table to take 100% of width, but you have cells that should only take some width in it. So, the navigator has to take a choice between: must I take 100%, or just the sum of cells max-width?
The best I can do is to fix the width of the cells, and let a last one take the remaining space. Like this: https://jsfiddle.net/1rz8bksp/
each cell would take between 75 and 150px, as asked,
the remaining one will take... the remaining space.
Not very satisfying, but I don't see how to do elsewhere...
I would like to generate a table with relative sizes. For example, I would like an empty table with 14 columns and 1 row. The row height should be as 0.75 of the width of one cell. In this case, with 14 columns, one cell would be around 7% width.
The purpose that I'm using empty table is that: I'm using the drag and drop function provided by html5. I would like to drag something and drop into the different cells of the empty table.
Currently, I found ways to using padding to have the desired height when it is empty. However, the problem with padding is once you drag something into the empty cell, it will still has the empty padding area.
Anybody have suggestions what should I do?
Thanks a lot!
If you can place a DIV in your cells, you can use the following CSS to ensure that each cell's height is 75% of its width:
td {
position: relative;
}
td > div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
td:before {
content: "";
display: block;
padding-top: 75%;
}
This is based on the fact that padding is always a function of an element's width, not its height.
Fiddle
If you are able to size your table with viewport sizing, I think this is achievable.
For example if your table is sized at 100vw (full screen width) and you have ~7% width columns (or ~7vw), then you could set the height of the table cell to be calc(0.75 * ~7vw).
table {
width: 100vw;
}
tr {
height: calc(0.75 * 7.1428vw);
}
td {
width: 7.1428% /* or 7.1428vw */
}
You could add calculations to the table as well (doesn't have to be 100vw, just based off of the viewport).
Are you able to use viewport sizing for the table?
If you can run some javascript on drag. You could have a class on cells when empty that adds the padding and remove that class from the cell once something has been dragged into it.
So, when generating your html make sure that each cell has an empty class on it. Then remove that class when dragging something into it. If the cell can be emptied, then you'd have to re-apply the class. All these operations can be done during a drag. To determine whether a cell is empty just see if it has the empty class on it.
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.
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.
I have a problem with an <asp:GridView>
Rows are too tight from each other so i want to give them a fixed height. I tried using RowStyle's and AlternatingRowStyle's cssclass. In my css I have:
.new_fila_exp_ini
{
margin:0 auto 100px auto;
}
But it doesn't use the 100 pixels.
I think it's because it used to be a HTML table before that I converted into a <asp:GridView> so the styles doesn't apply correctly.
But I don't know how to do it.
Any ideas??
Setting margin on a table row won't work very well, you're better off setting padding. In order to do that more effectively, set the padding on each table cell, like:
.new_fila_exp_ini td {
padding-bottom: 100px;
}
See how you get on with that.