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.
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 am using flex property to display the progress of work in an office. I have multiple rows of data displaying. But the child div width is showing differently on each row depends on a number of children inside the parent div. How to show every time equal width for all same values ?
Thank you 04FS for the information on flex-grow and flex-shirnk to make zero. I have changed the CSS for my flex box and given the width of each column in %. This solved my issue
#parent
{
width: 750px;
display: flex;
}
.grow {
width: 100%;
text-align:center;
white-space:nowrap;
}
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 am trying to create a list, two items wide and however many down. Inside on div is an image, this image seems to overflow the div even when I tell it not to. An example can be found here.
Can someone help me format this the way I would like it?
Setting the overflow property to hidden will prevent div contents from spilling over:
.catalogentry {
overflow: hidden;
}
http://jsfiddle.net/6XXrp/
As per your comment:
What you'll need to do then is wrap each img in a div, say of class contain, and specify the following in CSS:
.contain {
height: /* max height you want */
width: /* max width you want */
overflow: hidden;
}
try resizing your img instead of cutting it of with overflow:hidden;
something like this:
.catalogentry .itemImage img {
max-width: auto;
max-height: 80px;
}
note that resizing pictures is better handled server side, to improve loading times, but that is a different story...
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.