CSS table column widths not working

Question

(I thought I might find an answer in Set the table column width constant regardless of the amount of text in its cells?, but none of the solutions there seem to work for me.)

I would like to build a table with two columns, one 30% of the text area width and the other filling the remaining space. Between cells I need about 1em of space so I can apply distinct borders around each cell. This is the current code:

    table.condform {
      margin-left: 50px;
      margin-top: 1em;
      table-layout: fixed;
      width: 80%;
      font-family: Courier, monospace;
      font-size: xx-small:
      padding: 0;
      border-collapse: separate;
      border-spacing: 2em;
      border: none;
    }
    
    table.condform td {
      padding: 0.1em 0.2em 0.3em 0.2em;
      min-height: 1em;
      vertical-align: top;
    }
    
    table.condform td:first-of-type {
      width: 40%;
    }
    
    table.condform td:nth-of-type(2) {
      width: auto;

 <table class="condform">
    <colgroup>
      <col style="width: 40%;">
      <col style="width: auto;">
    </colgroup>
    <tr>
     <td style="border: red 1px solid; background-color: #ff0">a</td>
     <td>b</td>
    </tr>
    <tr>
     <td style="border: blue 1px solid; background-color: #0ff">a</td>
     <td>b</td>
    </tr>
    </table>

Regardless of what I do the cells shrink down to fit their contents, and nothing I do seems to affect cell spacing:

I've tried six or seven different fixes now, including all the ones in the link above, but to no avail. Surely setting column widths and cell spacing can't be beyond the abilities of CSS?

EDIT 20161221 1040: Setting td width values in pixels works, but I'm not keen on specifying pixel values if I can help it.

EDIT 20161221 1052: Looking in the element inspector it seems that the table class isn't applying properly. It's a table, its class is condform, but none of that class's styles are showing up in the style field. (I know there are blank properties, but they shouldn't be causing any trouble and haven't elsewhere.) Subordinate styles are still applying properly, as evidenced by the fact that pixel widths work.

I'm flummoxed now.

Try setting the width on the `` inside the first ``, and make sure your HTML has a doctype. — Ismael Miguel, Dec 21 '16 at 10:00
Yup, it's properly typed for HTML5. I'll try styling the width manually - one moment. :-) — Andrew Perry, Dec 21 '16 at 10:04
Well, that worked. I'd prefer to handle it all in the stylesheet, but hey - if it works, it works. Thanks! (Add it as an answer if you like and I'll get it accepted.) — Andrew Perry, Dec 21 '16 at 10:06
It is the weirdness of tables. You have to set the width on the first `` for all the others to follow. If you set the width on the middle of the table, it won't affect the width. I would still use @Robba's suggestion, since it seems to work on IE11 and isn't (sorta) hacky. — Ismael Miguel, Dec 21 '16 at 10:26
Unfortunately it didn't work at all here. Not sure what's going wrong with it. I'm still surprised that IE11 doesn't seem to recognise CSS widths for it in this one instance. — Andrew Perry, Dec 21 '16 at 15:18
It was completely ignoring width settings. I ended up just using your workaround. — Andrew Perry, Dec 28 '16 at 11:56

score 0 · Answer 1 · answered Dec 20 '16 at 12:20

You don't need the colgroup. By just removing those it works fine:

table.condform {
  margin-left: 50px;
  margin-top: 1em;
  width: 80%;
  font-family: Courier, monospace;
  font-size: xx-small:
  padding: 0;
  border-collapse: separate;
  border-spacing: 2em;
  border: none;
}

table.condform td {
  padding: 0.1em 0.2em 0.3em 0.2em;
  min-height: 1em;
  vertical-align: top;
}

table.condform td:first-of-type {
  width: 40%;
}

table.condform td:nth-of-type(2) {
  width: 0.5em;
 }

<table class="condform">
<tr>
 <td style="border: red 1px solid; background-color: #ff0">a</td>
 <td style="border: green 1px solid; background-color: #fda">b</td>
</tr>
<tr>
 <td style="border: blue 1px solid; background-color: #0ff">a</td>
 <td style="border: green 1px solid; background-color: #caa">b</td>
</tr>
</table>

That was what I originally did, setting the width in CSS only. It makes no difference to the appearance, unfortunately. I'm stuck using IE, if that could be an issue. — Andrew Perry, Dec 20 '16 at 12:23

score 0 · Answer 2 · edited Dec 21 '16 at 10:25

0

You want output like this....... ? see this link

table.condform {
  margin-left: 50px;
  margin-top: 1em;
  table-layout: fixed;
  width: 80%;
  font-family: Courier, monospace;
  font-size: xx-small:
  padding: 0;
  border-collapse: separate;
  border-spacing: 2em;
  border: none;
}

table.condform td {
  padding: 0.1em 0.2em 0.3em 0.2em;
  min-height: 1em;
  vertical-align: top;
}

table.condform td:first-of-type {
  width: 40%;
}

table.condform td:nth-of-type(2) {
  width: auto;}

<table class="condform">
<colgroup>
  <col style="width: 40%;">
  <col style="width: auto;">
</colgroup>
<tr>
 <td style="border: red 1px solid; background-color: #ff0">a</td>
 <td>b</td>
</tr>
<tr>
 <td style="border: blue 1px solid; background-color: #0ff">a</td>
 <td>b</td>
</tr>
</table>

depen.io/anon/pen/eBXJrJ

edited Dec 21 '16 at 10:25

Vikrant

4,920
17
48
72

answered Dec 20 '16 at 12:25

GMKHussain

3,342
1
21
19

Yeah, that's the aim. It seems to be parsing correctly there - but I can't find anything else it could be inheriting from. Time to break out the inspector.... – Andrew Perry Dec 20 '16 at 12:35
1

This is a very low quality, link only answer. It would be better to include the code in a stack snippet and explain why this solution would work. – roberrrt-s Dec 21 '16 at 09:45
I assume it's a clarification question in preparation for an answer. – Andrew Perry Dec 21 '16 at 09:51

CSS table column widths not working

2 Answers2