Replaces <table...></table> with pure CSS

[Craig.Prichard]

I am using tables like this extensively:

Code: Select all

<table>
	<col />
	<col style="width: 68px;" />
	<tbody>
		<tr>
			<td>
				<h2 class="TopicTitle">Topic Title</h2>
			</td>
			<td>
				<MadCap:snippetText src="../Resources/Snippets/UI_Elements/page/ExpandCollapse.flsnp" />
				<MadCap:snippetText src="../Resources/Snippets/UI_Elements/page/ShowMeIcon.flsnp" />
			</td>
		</tr>
	</tbody>
</table>

for these reasons:

• single line
• full width of browser window regardless of browser window dimensions
• first column
  • text only, sometimes centered, sometimes aligned left
  • so far only a single line of content but that could change
• second column, which I would prefer to not have to specify a width for (so I could modify the snippets without having to modify all the instances of the tables or pure CSS)
  • several images in a single line as close together as possible
  • as narrow as possible (to maximize the first columns' width)
  • as far right as possible (to maximize the first columns' width)

I would prefer a pure CSS solution, div(s) and span(s), but I don't know how to.

Thank you for any suggestions.

[LTinker68]

It's really DIVs and positioning you want to learn up on. I recommend starting with http://www.w3schools.com and clicking on "Learn CSS", then go to "Positioning".

Before you go too far down this path, however, I suggest you test it with all of your outputs to make sure you can truly single-source what you want to do. Word output, for example, doesn't like DIVs, so your Word output would be totally screwed up. I believe PDF output is fine if you're putting the DIVs side-by-side and not overlapping, but I haven't tested it. WebHelp shouldn't be a problem, but test your style declarations in as many different browsers as you can, because they don't always support style definitions consistently. HTML Help may not support some of the new stylesheet definitions, since it's based on older technology.

So I'd test what you want to do on a couple of topics, but I wouldn't change everything over until you're sure it'll truly work for you in all your outputs.