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.
Related
I am currently creating flex tables that, for middleware reasons, will still use <table> elements but with flex styling. I would like the ability to have the first and/or last cell of each <tr> span the entire row height while the other items wrap in between.
Goal:
One way to solve this is to switch to a div-based table. The wrapping content is contained in a separate div from the non-wrapping first & last cells, and the child "cells" wrap inside this parent. However this approach causes problems with the existing middleware infrastructure (customer configs, table sorting & paginating, etc). Inserting divs into a <table> structure is also a no-go due to how browsers render <table> elements.
Codepen demo with a responsive table and a desired-end-state div-based table: https://codepen.io/shrakner/pen/xmBQKx
Hopefully there's some flexbox trickery that can accomplish this and I just haven't stumbled across it yet- I'm interested in any suggestions or alternative ways of approaching this problem!
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 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.
I'm having issues with creating equal height columns on the basic Dreamweaver HTML5 3 col fixed layout. I was using jQuery equal height columns to make the column's bg colour be equal on all pages, however due to some scripts I am using on my site and incompatibility with a manual "style:height:xpx" added to the article column I would like to try and use the display:table, display:table-cell method. I have used the basic Dreamweaver 5.5 HTML5 template, and kept everything the same except removed the display:block property for aside, article etc elements. I added a container div around the 3 columns; aside, article and aside.
Everything works fine - as in the background colour continues until the end of the block, which is what I need - except the trouble is, for some reason on the aside columns it leaves a gap at the top of the columns of 13px. I have no idea why this is happening.
I have uploaded the file here: http://www.primecuts.org.uk/test.html . If I remove the <nav> part, the gap is still there, although it doesn't look as "ugly" as the bgcolor difference is not noticeable, I would like there to be no gap between the text starting and the top of the block/bottom of the header. Any help would be appreciated, I don't know what is causing this.
The problem can be fixed by
.sidebar1 { vertical-align:top; }
The gap has something to do with the padding on the .content article, in the sense that removing padding removes the gap, and the padding is influencing the position of sidebar because they are both table cells in the same table row, but I confess that's a bit of a woolly explanation, and I can't actually identify the specific CSS requirement that this relates to.
I am generating the Html in Excel sheet and entire table is fine and except the
two cells are much wider. How do I reduce the width of those cells. I tried changing
the width and everything but no use. It works fine on Html table. On Excel spreadsheet it looks different.
Well, Chrome v6.0.472.62 and Firefox 3.6.10, both on Ubuntu 10.04, allow:
th, td {width: 7em; max-width: 8em; }
the max-width seems to be the important part, preventing the cell from growing. Also the white-space: nowrap is important if you don't want the cell to wrap the contents within the defined width.
There's a demo over at jsbin.com, I've not hidden the overflow on the overflowing cell, deliberately so that you could see it in effect, though in real use you'll need to work out some way of showing the actual contents of the cell without it obscuring the content of its neighbours.
Since its a HTML table, just two cells cant be big. its either one entire row bigger or one entire column bigger.
If that is the case, the dimensions are best-fit based on the content of those cells. Therefore, the width attribute won't take effect. if wordwrap is not helping, changing the fontsize of that exact cell alone can help you.
Something else to check: make sure that you're outputting the proper number of cells per row taking careful account of row/col spanning. If you miss one somewhere, the whole thing will be screwy.