CSS 如何让表格中的所有元素都在同一位置结束

Question

我试图对齐我的表格，以便每个团队名称/ 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;
}

Answer 1

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