Show nonexistent table cells

Question

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/

Then do it this way, then use a regex to weed out empty cells. — Ian Hazzard, Oct 29 '14 at 00:44
Include relevant CSS *and* HTML in the question itself. Explain what the problem is. You are now just describing an illogical approach (rendering a table that has one cell as two cells) to an unspecified problem. Exactly how do you want to show a single-cell table? If 100% wide, just set the table width to 100% and no cell width. If 50% wide, just set the table width to 50% and no cell width. — Jukka K. Korpela, Oct 29 '14 at 06:49

score 0 · Accepted Answer · answered Nov 03 '14 at 16:22

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.

Show nonexistent table cells

1 Answers1