我试图对齐我的表格,以便每个团队名称/ Logo 在表格中的同一点结束,无论团队名称的长度如何。例如,一个短名称的团队比一个长名称的团队结束得更快,这使得表格看起来不愉快。我想改变它。
Torino (logo) VS (logo) Lazio
Juventus (logo) VS (logo) Bologna
Benevento (logo) VS (logo) SPAL
为此
Torino (logo) VS (logo) Lazio
Juventus (logo) VS (logo) Bologna
Benevento (logo) VS (logo) SPAL
这样不管名字长短,每一行总是互相排成一行
JavaScript:
schedule += "<tr>" +
"<td>" + teamsforschedule[fixtures[i].Homeid - 1].name + " " + "<img src =" + teamsforschedule[fixtures[i].Homeid - 1].logo +
" width = 20px height = 35px >" + "</td>" +
"<td>" + fixtures[i].Homescore + " - " + fixtures[i].Awayscore + "</td>" +
"<td>" + "<img src =" + teamsforschedule[fixtures[i].Awayid - 1].logo +
" width = 20px height = 35px >" + " " + teamsforschedule[fixtures[i].Awayid - 1].name + "</td>" +
"</tr>"
}
CSS:
table {
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
color: #0d0d0d;
width: 75%;
margin: 0 auto;
margin-top: 3%;
margin-bottom: 3%;
table-layout: fixed
}
tr {
text-align: center;
height: 45px;
border: 1px solid #CCC;
background: white;
}
th {
text-align: center;
width: 300px;
background: #DFDFDF;
/* Darken header a bit */
font-weight: bold;
}
最佳答案
将 table-layout
设置为 fixed
对此有帮助。
table {
width: 100%;
table-layout: fixed;
}
td:first-of-type {
text-align: right;
}
td:first-of-type span {
display: inline-block;
text-align: right;
}
td:nth-child(2) {
width: 5em;
text-align: center;
}
<table>
<tr>
<td><span>Team Name (logo)</span></td>
<td>vs</td>
<td>(logo) Another team</td>
</tr>
<tr>
<td><span>Medium Team Name (logo)</span></td>
<td>vs</td>
<td>(logo) Another team</td>
</tr>
<tr>
<td><span>Some really long Team Name (logo)</span></td>
<td>vs</td>
<td>(logo) Another team</td>
</tr>
</table>
关于CSS 如何让表格中的所有元素都在同一位置结束,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47232385/