CSS Tabellenspaltenbreiten arbeiten nicht

Question

(ich dachte, ich könnte eine Antwort in Set the table column width constant regardless of the amount of text in its cells? finden, aber keine der Lösungen scheint es für mich zu arbeiten.)

Ich mag würde eine Tabelle mit zwei Spalten bauen, ein 30 % der Breite des Textbereichs und der andere füllt den verbleibenden Platz. Zwischen den Zellen benötige ich ungefähr 1 m Raum, so dass ich verschiedene Grenzen um jede Zelle anwenden kann. Dies ist der aktuelle 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>

Unabhängig davon, was ich tun die Zellen schrumpfen ihre Inhalte zu passen, und nichts, was ich scheint tun Zellenabstand zu beeinflussen:

Ich habe jetzt sechs oder sieben verschiedene Fixes ausprobiert, einschließlich aller oben genannten Links, aber ohne Erfolg. Sicherlich darf die Einstellung der Spaltenbreiten und Zellenabstände nicht über die Fähigkeiten von CSS hinausgehen.

BEARBEITEN 20161221 1040: Einstellung td Breite Werte in Pixel funktioniert, aber ich bin nicht scharf auf die Angabe von Pixelwerten, wenn ich es helfen kann.

BEARBEITEN 20161221 1052: Im Element-Inspektor scheint es, dass die Tabellenklasse nicht richtig angewendet wird. Es ist ein table, seine Klasse ist condform, aber keine Stile dieser Klasse werden im Stilfeld angezeigt. (Ich weiß, dass es leere Eigenschaften gibt, aber sie sollten keine Probleme verursachen und nicht woanders liegen.) Untergeordnete Stile werden immer noch ordnungsgemäß angewendet, wie die Tatsache zeigt, dass Pixelbreiten funktionieren.

Ich bin jetzt flummoxed.

Answer 1

Sie benötigen die colgroup nicht. Mit nur diejenigen zu entfernen, es funktioniert:

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>

Answer 2

Sie ausgeben möchten wie diese .......? 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