我对所有这些都缺乏经验,但这是我的问题。 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>
&#13;
有什么建议吗?我还应该补充一点,我希望表格尽可能地响应(这就是我开始使用CSS的原因)。谢谢!
答案 0 :(得分:0)
.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>