テーブル内の柱の奇妙な分布

Question

私はこれですべてのことを経験していませんが、ここに私の問題があります。 The columns in my table are being distributed weirdly。私はこれをSquarespace（判断しないでください）を使ってやっていますが、CSSを編集してコスチュームコードを挿入することができます。何らかの理由で、最初の列が残りの部分よりも多くのスペースを占めています。ここで

は、私がやったものだ：

.mytable { 
 
    border: 0px solid #009688; 
 
    width: 100%; 
 
    background-color: white; 
 
    white-space: nowrap; 
 
    overflow-x: auto; 
 
    display: block; 
 

 
    th { 
 
    padding: 4px; 
 
    text-align: left; 
 
    height:50px; 
 
    color: #eeeeee; 
 
    background-color: #009688; 
 
    } 
 

 
    td { 
 
    padding: 5px; 
 
    vertical-align: top; 
 
    border:0px; 
 
    line-height: 1.5em; 
 
    width: 100%; 
 
    } 
 

 
    tr:nth-child(odd) { 
 
    background-color: #E0F2F1 
 
    } 
 
    
 
    tr:nth-child(even) { 
 
    background-color: #fcfcfc 
 
    } 
 
    tr:hover { 
 
    background-color: #1DE9B6 
 
    } 
 
}

<table class="mytable"> 
 
    <tr> 
 
    <th>Menge</th> 
 
    <th>Bezeichnung</th> 
 
    </tr> 
 
    <tr> 
 
    <td>100 g</td> 
 
    <td>Geräucherter Lachs</td> 
 
    </tr> 
 
    <tr> 
 
    <td>2 Stück</td> 
 
    <td>Avocados</td> 
 
    </tr> 
 
    <tr> 
 
    <td>2 EL</td> 
 
    <td>Zitronensaft</td> 
 
    </tr> 
 
    <tr> 
 
    <td>½ Stück</td> 
 
    <td>Salatgurke</td> 
 
    </tr> 
 
    <tr> 
 
    <td>4 Stück</td> 
 
    <td>Eier</td> 
 
    </tr> 
 
    <tr> 
 
    <td>2 EL</td> 
 
    <td>Sesam</td> 
 
    </tr> 
 
    <tr> 
 
    <td>500 g</td> 
 
    <td>Sushireis</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1 EL</td> 
 
    <td>Zucker</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1 EL</td> 
 
    <td>Salz</td> 
 
    </tr> 
 
    <tr> 
 
    <td>4 EL</td> 
 
    <td>Reisessig</td> 
 
    </tr> 
 
    <tr> 
 
    <td>10 Stück</td> 
 
    <td>Noriblätter</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1 Stück</td> 
 
    <td>Bambusmatte</td> 
 
    </tr> 
 
</table>

任意の提案ですか？また、テーブルをできるだけ反応的にしたいということを付け加えておきます（私がCSSを使い始めた理由です）。ありがとう！

Answer 1

.mytable { 
 
    border: 0px solid #009688; 
 
    background-color: white; 
 
    white-space: nowrap; 
 
    overflow-x: auto; 
 
    table-layout: fixed; 
 
    max-width: 600px; 
 
    width: 100%; 
 
} 
 
    th { 
 
    padding: 10px; 
 
    text-align: left; 
 
    height:50px; 
 
    color: #eeeeee; 
 
    background-color: #009688; 
 
    width: 50%; 
 
    } 
 

 
    td { 
 
    padding: 10px; 
 
    vertical-align: top; 
 
    border:0px; 
 
    line-height: 1.5em; 
 
    width: 50%; 
 
    } 
 

 
    tr:nth-child(odd) { 
 
    background-color: #E0F2F1 
 
    } 
 
    tr:nth-child(even) { 
 
    background-color: #fcfcfc 
 
    } 
 
    tr:hover { 
 
    background-color: #1DE9B6 
 
    } 
 

<table class="mytable"> 
 
    <tr> 
 
    <th>Menge</th> 
 
    <th>Bezeichnung</th> 
 
    </tr> 
 
    <tr> 
 
    <td>100 g</td> 
 
    <td>Geräucherter Lachs</td> 
 
    </tr> 
 
    <tr> 
 
    <td>2 Stück</td> 
 
    <td>Avocados</td> 
 
    </tr> 
 
    <tr> 
 
    <td>2 EL</td> 
 
    <td>Zitronensaft</td> 
 
    </tr> 
 
    <tr> 
 
    <td>½ Stück</td> 
 
    <td>Salatgurke</td> 
 
    </tr> 
 
    <tr> 
 
    <td>4 Stück</td> 
 
    <td>Eier</td> 
 
    </tr> 
 
    <tr> 
 
    <td>2 EL</td> 
 
    <td>Sesam</td> 
 
    </tr> 
 
    <tr> 
 
    <td>500 g</td> 
 
    <td>Sushireis</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1 EL</td> 
 
    <td>Zucker</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1 EL</td> 
 
    <td>Salz</td> 
 
    </tr> 
 
    <tr> 
 
    <td>4 EL</td> 
 
    <td>Reisessig</td> 
 
    </tr> 
 
    <tr> 
 
    <td>10 Stück</td> 
 
    <td>Noriblätter</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1 Stück</td> 
 
    <td>Bambusmatte</td> 
 
    </tr> 
 
</table>