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

debugcn 发表于 Dev

工作坊

我正在尝试对齐我的表格，以便每个团队名称/徽标都在表格中的同一点结束，而不管团队名称的长度如何。例如，名称较短的团队比名称较长的团队结束得更早，这使得桌子看起来不舒服。我想从这里改变它。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。