Q: Weird distribution of columns in tables 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!

A: 

.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>


