Weird distribution of columns in tables - html

Question

I'm quite inexperienced in all of this, but here's my problem. The columns in my table are being distributed weirdly. I'm doing this using Squarespace (don't judge), but I can edit the CSS and insert costume code. For some reason the first column is taking up a lot more space than the rest.
Here's what I've done:
.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>
Any suggestions? I should also add that I want the tables to be as responsive as possible (that's why I started playing with the CSS). Thanks!

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>