html - 表中列的奇怪分布

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>