Though I had found the workaround for my problem, I still would like to clarify some things.
Here's what I wanted to achieve: a table with an image as separator between rows using generated content
Here was my first effort: http://jsfiddle.net/5Vqqf/68/
As you can see, the generated content in the table cells (td) doesn't seem to render anything. I expected a red line underneath each rows.
Second effort: http://jsfiddle.net/5Vqqf/69/
I insert some content to the content property, ie. content:".";
This seems to do the trick in generating the content. However, Firefox, unfortunately, doesn't render it right, in that the content is in relation to the whole page. (Notice the red line at the bottom in FF?)
Third effort: .../70/ (Same link but change the last number to 70 - Sorry, I don't have the privilege to post more than 2 links yet)
Giving the cells a float seem to fix Firefox's problem. However, the heights became inconsistent.
Last effort: .../72/
Finally, I resort to applying the content into the table rows (tr) instead. And this did the trick for all major browsers (excluding IE7, of course).
Okay, so here are my questions:
Why can't this work with an empty content like most elements do?
Why does Firefox render it in relation to the whole page (see second effort)? Is it a bug on FF side?
Is it a bad practice applying content into the table rows (tr)?
(Note: this question is regardless of the possibility of using background image directly on the cells themselves or using borders)
Related
I was trying to position: absolute an element within a table, and found that for cells which span multiple rows, it would only reach the bottom of the first cell, and that this would only happen in IE. After some tinkering, it seemed the cause of this problem was that the table was nested in a div with display: -ms-flexbox, and removing this css meant the element could reach the bottom of the second row which the cell spanned.
Here is a JS Fiddle showing what I mean. In Chrome this would work correctly, in IE10, the green boxes aren't aligned to the base of the rowspan cell.
https://jsfiddle.net/LomLdtxg/8/
Can anyone explain how these two pieces of CSS interact, and why this happens? This seems to only be an IE explorer issue, is there some workaround / hack that needs to be done in order to have it render correctly?
I'm trying to make a CSS table that (for layout purposes) has a caption at the top and bottom.
Unfortunately, as far as I can tell, display: table-caption merges everything into a single space at the top. This means that only the "header" caption is actually displayed.
I've tried treating them as rows instead, but for some reason, their widths bind to that of the first table column. (Am I doing something wrong here?) The same happens if I make them regular divs with their widths set to 100%.
Is there another, perhaps more elegant way to have multiple table captions? Have I made some stupid error in my attempts that's screwing up the layout?
Since you're using CSS for layout (this is not tabular data) then there's no reason to use display:table-caption for the footer. Just make a regular div whose width is set to the same as the table (or fills a container that shrink-wraps the table).
Edit: Here's an updated example: http://jsfiddle.net/fCTpR/1/
Maybe this has already been answered and I am searching incorrectly, but here is my problem. I have an MVC project where the view needs to look like a table. So, I am using a div with spans inside of it. My problem is that I need the data inside to be vertically centered. When I set my display to inline-block I cannot vertically align because some of the data may wrap and become two lines. So, this throws out using line-height. Then I tried to make my span display values to be table-cell. This works and I can use vertical-align:middle, however then I am unable to set a fixed width. And, I need this to look like a table, so the fixed width is required or else it looks horrible.
Here are my attempts thus far, and I know the css needs cleaned up, but I would rather fix this first atm.
http://jsfiddle.net/Scorpionb/ukMfX/ (The scrollbars cause the entire row to misalign)
http://jsfiddle.net/Scorpionb/QzFc3/(white-space:normal; and removed overflow to get rid of the scrollbars)
http://jsfiddle.net/Scorpionb/H6ATy/ (trying to treat it as a table)
Hopefully this makes sense, but I have run around so many circles now that I am losing track of what works and what does not. So, ask if you have any questions.
Also, this is an ASP MVC project, so I am tying each row of data to a form to be submitted and bound to a model
You should really be using tables for tabular content.
You might also benefit cleaning up your CSS by using shorthand CSS. Some useful ones to get you started:
font
border-width
Please look at the following page in IE9..
www.homextreme.co.za/default_test.aspx
I have added borders on some of the tables for debugging purposes
On the left choose any region from the dropdown, the page will refresh..
On the right you will see there is now a gap below the table on the right.
I have googled for ages and searched for IE9 table bug fixes and tried them but for the life of me I cannot get that cell to size correctly. Can somebody please help me with a solution for this?
Link to screenshot before I expand the directory on the left.
Link to screenshot after...
Thanks
After making a selection from the list you get a long list on the left column. Since all the content is inside a bigger table (oy tables inside tables inside tables), the right column has to expand vertically.
In the right column there are two cells on on top of the other one (plus the one in the middle for spacing). The one in the top includes the table with the space you don't want, the cell in the bottom has a bunch of other smaller sections. The top cell expands vertically and ends up being taller than the content, and that's the extra space you see. If you change the vertical alignment (vAlign) of that cell (1st row, 3rd cell) to top, you'll see the space move to the top.
The reason it doesn't show up in other browsers is that they probably have different row height algorithms and make the 1st row as small as possible and leave the rest to the 2nd and 3rd. And then IE uses percentages or makes the rows proportional to the content or something.
I'm not sure what to suggest you do to fix this. If you're going to stick to tables for layout, just use one row and have a cell for each column, and keep the content of each column in the same cell instead of splitting it in rows.
This jsfiddle example is what i got right now, the principle works on a simpler table i need to display but i need to change it a bit for another page. Section 1 will always have the same size, section 2 is of variable size and section 3 should fill the space that's left by section 2. This all works fine and dandy but I have to add another section, let's call it 4, that's of fixed size but always stays at the bottom of the bigger table, right after 3. The height of the big table must always stay the same. The line breaks are there to show what happens when the different tables change size.
I can't use divs or any fancy CSS because of a plug-in that's parsing it but if you got a fancy solution i can maybe make it work. Thanks for your time.
Also, can't use javascript to resize stuff dynamically unfortunately.
Sounds like a job for tbody and tfoot tags along with CSS to control the sizing.