I have a table with n columns. Each column has a predefined width, and inside each column th, there is a div containing the actual header text, and a div containint a dropdown menu.
This is a simplified structure of the table:
<table>
<tr>
<th>
<div>TEXT</div>
<div><select>...</select></div>
</th>
<tr>
...
...
</table>
the predefined width for the column can cause the text to be splitted in more than one line. When this happens, obviously the elements inside the th rearrange their position, causing a misaligment for column's select..
What I need to do, is to find a way to have every select aligned to each other, possibly anchored to the bottom of the th.
http://jsfiddle.net/SezSZ/2/ <- Here I've made an example of what I'm working on.
The 2nd table shows the table without any style (Except for th width): notice the misalignment between the first and second select.
the 1st table, instead, has some styles applied. As you can see, the second column text is overlapped by the select.. I tryed to solve this problem playing with the "position" attribute.. How can I tell the text to take as much space as it needs, without knowing how many lines it will be splitted to?
Another (minor) thing: I'd like to set every select to take 100% width of his parent div, but (TABLE 1) the dropdown menu right side is overlapping the table border (1 or 2 px, while in TABLE 2 everything is ok)..
Thanks in advance for any help, I hope I was clear enough, best regards
I believe this JSFiddle is what you're after, right? The whole trick is to use vertical-align: middle on the th.
Related
Backgrid allows editing values in a table, and accomplishes this by putting an <input type="text"> inside the <td>. The input is set to max-width: 100% but it still pushes the size of the column out farther in some cases.
For an example, see the grid on their Examples section and click an item in the "Population" column. When it gets the editor class, its padding is set to 0, and both the <td> and <input> have box-sizing: border-box, but the width of the column still increases.
So does width: 100% not mean 100% of the width of the <td> as it is at the time? Or is it just not possible to make this work using CSS only? I could probably use a backbone event to get the size of the td and then set the input to the same size but that sounds a bit hacky.
The way the width of table columns is calculated is not trivial. They try to distribute the available space among the columns in a way that columns with more content gets a bigger share.
If you go and say "the content should be as big as the column" you make that even more complex because you create a ciruclar dependency between content width and column width.
So does width: 100% not mean 100% of the width of the <td> as it is at the time?
No. When anything changes, everything is updated. CSS does not keep a history, so it does not know the width of an element at a particular time. So width: 100% means that after everything was updated, the input will have the same width as the <td>. But that may be different from what it was before the change.
I do not have the perfect solution for your problem, but these are some ideas:
check the column width before replacing the content using JavaScript (as you already noted in your question)
Use fixed table layout. This way all columns have the same width and will not change based on their content.
set contenteditable on the <td> instead of using an input element. This should not impact the columns width — at least not as long as you do not actually edit the content.
I have a bootstrap model, which contains a 3 column layout. Each column contains a table with several tbody elements. The last column may contain hidden table elements (generated with style: 'display:none').
If all elements of the last column are hide, I want the modal to resize to fit to the smaller content. Currently the width stays the same, whatever content is displayed. How can I get such a behaviour?
you could try to actually give those columns a class and set their width to 0 or 1 px...
.one-wide { width:1px; }
<th class="one-wide">
But that is how i would solve it, since i like classes better anyway, you can just give them the display none as well.
I'm right now fiddling around with table column widths. As the width attribute is deprecated in HTML5 I'm trying to set table column width by means of CSS. For some reason however this does not work reliably.
To be more specific...
I'd like to build a Gantt chart (some sort of schedule for those of you that haven't heard of it yet) by using a table. Each month is built by a number of columns that represent the number of days of the corresponding month. The header uses colspan to be spanned over all days of a month. Every day should be 10px width. So a TD that spans over 31 days (e.g. January) is decorated with the attribute style="width: 310px".
The project tasks moreover consist of three spanned columns: the first column is the unoccupied time between the beginning of the project and the date the task starts on, the second spanned column is the time the task is active and the third column is the time between the end of the task itself and the end date of the whole project.
I hope that explanation helps to get your head around my problem...
Weird about that is the fact that the columns somehow appear to ignore their width setting. It's visible in a DOM inspector like the one FireFox provides. It's not striked out so it's accepted and actually used in the DOM, but the calculated width of the TD does not reflect this setting. Some TDs are smaller, others wider than the width given by the style attribute.
And I simply don't see why.
So, is there a way to set the width of a spanned set of columns to a fixed value that is absolutely reliable and repeatable?
Table cell widths are calculated differently.
Unlike normal elements, where a width: setting is golden, a table cell can have a different width based on its contents. A table cell's content may never leak out. So if you have a longer cell, it would expand in width, overriding your width: setting, and thus "messing up" the rest of the cells as well (if you had a fixed width for all of them).
My recommendation: Give the <table> itself a width, and let it sort itself out. The results are usually optimal.
As you can see in the provided Fiddle there are rival width settings in the THs and TDs. I've removed the width setting from every TD only leaving those in the THs in place. With that it seems to work now.
In each TD element, insert a div and set the required width. That will insure that the width is fixed.
<table>
<tr>
<td><div style="width: 200px;">Fixed 200px width</div></td>
</tr>
</table>
insert div or <p> tag in each td and set the width of div or <p> instead of <td> itself..
i had same problem few days ago,but now it is working.
Is there way to spread out elements, (eg: < li>'s inside a < ul>)?
My < li>'s are inline (not vertical) and I DON'T want to change their size.
I just want to set the space between the < li>-elements to get 100% in sum.
eg.:
< ul> consists of 3 < li>'s: the first one is 200px, the 2nd one is 200px and the 3rd one has 400px.
If the screen has 1000px, the spaces between the li's should be 200px, so 100px for each space (if the padding on the left and right side is 0px).
I'd like to achieve this without the use of javascript
EDIT:
The Pic shows the sultion I wanted to achieve with lists.
Every element with a blue border should have been an li (and as you can see in the picture: there are some elemets which contain text, and so it wouldn't be a good idea to set their with inside css).
The space between the elements should be exacly so big, that the last element (the red logout-button) touches the right edge of the screen.
-but, in order to avoid javascript, I solved it now with a table
Are you looking for something like this?
http://jsfiddle.net/jMTjb/1/
or with white spaces
http://jsfiddle.net/jMTjb/2/
How I solved it:
instead of using this http://jsfiddle.net/Tejzf/
I used a table instead of the ul and il elements.
Table width=100%, the width's of the cells (which where li's before) are 1px (as small as possible).
And between the cells, I added new, empty cells where I didn't define the width.
<table width="100%"><tr>
<td width="1">DATA1 from LI1</td><td></td>
<td width="1">DATA2 from LI2</td><td></td>
<td width="1">DATA3 from LI3</td>
</tr></table>
and thx for your replies
I wanted to know if I customize a table with <td> and <tr> elements in the same way I usually customize <div> elements of a page.
I'm asking this because I cannot modify the generated html code, and I would like for example to float the rows to right, or to add padding, margin.
Is CSS working perfectly on <tr> or <td> elements ? (I am asking you this before to start).
thanks
Is CSS working perfectly on or
elements ? (I am asking you this
before to start).
Yes, you can apply css to any element. By the way, you can choose the direction of TDs by specifying align="left" or align="right". No need to float them. You could have provided sample of what you want to achieve though.
It all depends what you want to do. If you want to apply custom floating to particular cells (using CSS float) you might get crazy results because you mock around with box-model of <td> element.
If you want to float the text/content inside, you can always use text-align:left / right / center.
Again - if you want to affect content of the TD it should be relatively same as if you used <div>. If you want to affect td itself you might get unexpected results especially around position, float, z-index, display CSS attributes.
"I am asking you this before to start".
That's a bit stupid (no(t too much) offense) don't you think?
If you had give it a try you would have seen that there's no problem. Just be aware that default style is not the same and that there are some constraint due to the displaying of table element (which you can get rid of by using the css display property).