<table style="width:100%;border-spacing: 4px; border-collapse: separate; margin-left: auto; margin-right: auto;">
<td id ="td0" >
<td id ="td1" onclick='_addCSSText(this, "KP", "#FFFF00")'>
<span>test2 does not put div correctly and other problems related to some positioning relative or absolute</span>
For a gradient to the corners don’t use angles but use sides.
Then you would need to absolutely position the overlay and remove it from the flow. Of course it will obscure any content in its way.
You would need position:relative on the parent td so that you have stacking context for the absolutely positioned div (don’t use relative position to structurally move things around as that’s not what it is meant for.)
Don’t forget to use units as some browsers will treat unitless values for dimensions as zero. You also set the element to be top:30px and left:10px and then you gave it 100% height and width. 100% + 30px is to big for any container. Use the 4 co-ordinate system (top,left,bottom,right) without width and height when you want to offset and element in relation to its parent container.
These would be the changes you mentioned but I don’t know if indeed that was what you are after.
Hi Paul, thank you.
Yes these are tabular data, not only one row, but multiple ones.
Your first suggestion took me quite near to the result I want (the trick was to put the text inside the div). But I prefer the deg instead of sides.
I reached this point (EDIT): https://jsfiddle.net/dbrh0xwv/3/
Another thing I don’t understand, is:
I want a padding on general TD, but I don’t want it in the td with the div, to make the blue diag coincide with the td border.
So I zeroed the padding in the specified td, BUT it zeroed only the left padding and not the top one??
What is the blue diagonal and the letter P supposed to achieve? How is it supposed to align in relation to the text that you have in that section? You said you wanted it as an overlay but now it is in the flow as part of the content in that cell.
If you want the blue to stay at the top you will need to add vertical-align:top here:
As an aside I note that you are using span elements and applying margins and padding to them but vertical margins don’t really apply to inline elements and padding will bleed out of the line-height. It probably makes no difference at the moment but you should be using a block element like a div (or p element for a paragraph) instead of a span. Spans are inline elements that hold inline phrase content and not usually whole sentences.
No you are mistaken the padding on the td is zeroed. There is some padding on the inner elements and the text will align with the baseline of the enlarged letter P (and the whole lot is vertically aligned to the middle as already mentioned).
Also note that there is no need to give table cells a height of 100% as all table-cells will automatically be the same height.
If you can do a quick mock up of what you want it to look like I will look back in the morning and give a demo. Bear in mind that the cells will adapt to whatever text is inside so you cannot work to a fixed height unless you want things to break. The content needs to be responsive and work at any size.
Hi, I found a solution for the letters inside the blue diag: I create a span inside the div with position:absolute and the div with relative and so I can put the letters precisely and not flow inline with the td text.
The letters inside the blue diag are a fast visual reminder if all that row is whitin certain parameters or not.
What I want is something like this:
So the div placement is also dependant of the height of the tr row… and also of the resizing of the table with the window browser…
So I tried with your previous suggestion, making the div itself absolute… and it seems to work well. https://jsfiddle.net/5zk8phq6/7/
Now, I can’t put the td text over the div with z-index higher than div… so I ended up with some transparency of the blue diag, not perfect but acceptable.
Scaling the window browser sometimes make the div out of the td, but again it’s acceptable.
If you can improve this, TIA.