表中列的奇怪分佈

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>