Problem: Every table cell of my two-column table needs to be 50% wide, but normal cell rules don't apply when there's a single-cell table, it takes on the 100% because the table is 100%. My CSS looks like this:
.mytable{ width: 100%; }
.mytable tr td { width: 50%; }
I tried every CSS combination I could think of and got nada. I gave up on CSS for this.
So now I'd like to force my table to render two cells even if only one cell exists in the markup. I'm trying to do that with <colgroup> <col span="2"> </colgroup>, but it doesn't seem to be working either.
Question: How can I force my table to render two table cells when only one exists?
JS Fiddle: http://jsfiddle.net/uryvmz57/
My issue was that my dynamic table would sometimes not have enough cells due to the data control and therefore the cell sizes would be rendered to the width of the table rather than the width I'd specified, as the table was set to 100%.
I found an easy solution in including a blank row of the proper number of cells, with its CSS properties set to be invisible to the naked eye - basically, what a header row would do for a table, except without being seen.