Ok ... I tried to makethe subject descriptive but it's still pretty crap, so let me explain.
I have a table showing a product list, one product per line with the item name and description in one column and cost in another.
I'm trying to get the item name to be shown in standard size bold, and the rest of the description in a small font. Where the small text is longer than the cell allows, I want it to wrap but not under the bold part, just under the other rest of the small text. The bold text would then be centered against the two small text lines.
So, Ok ... I could just split the cell and show names in one and descriptions in the other, however it's not the look I'm after. I want each rows name and description to flow on, as opposed to inserting a big break on all names shorter than the longest one.
At the moment, I am inserting a nested table with two columns and applying the formatting to the cells to get this appearance, but I'm hoping there is something easier in CSS.
Any help would be great.
Split a table cell contents into different formatting - CSS
Moderator: General Moderators
Hope I understand what you're after. Maybe use opposing floats?
Obviously this ain't pretty code (you could use also use p and nested em), but the principle should be clear.
Code: Select all
<div style="float:left;width:46%;font-weight:bold;">name</div><div style="float:right;width:46%;font-size:small;">description </div>Thanks for the great feedback.
It *almost* does what I want it to do, and as for not being pretty, well ... it's a hell of a lot prettier than the existing nested table per row technique I've been using.
The only part that doesnt quite work the way I would like is that when the second column text wraps, it aligns the large test to the top. I'm hoping that I can put the large text in the middle, even if the small text were to wrap 23 or 4 lines.
Also, I had to take away the widths (in order to stop the uniform spacing) and set the second float to none (in order to not have it insert a gap between boxes) but apart from that wrap issue, it's looking good.
Any idea if I can fix that last issue? Thanks
It *almost* does what I want it to do, and as for not being pretty, well ... it's a hell of a lot prettier than the existing nested table per row technique I've been using.
The only part that doesnt quite work the way I would like is that when the second column text wraps, it aligns the large test to the top. I'm hoping that I can put the large text in the middle, even if the small text were to wrap 23 or 4 lines.
Also, I had to take away the widths (in order to stop the uniform spacing) and set the second float to none (in order to not have it insert a gap between boxes) but apart from that wrap issue, it's looking good.
Any idea if I can fix that last issue? Thanks