Question

我试图调整我的表格，以便每个团队名称/徽标在表格中的同一点结束，无论团队名称的长度如何。例如，名称较短的团队比具有长名称的团队更快结束，这使得表格令人不悦。我想从中改变它。

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

使用td:first-child和td:last-child。第一个孩子应该有text-align: right;，而最后一个孩子应该有text-align: left;

td:first-child {
    text-align: right;
}

td:last-child {
    text-align: left;
}

Fiddle

Answer 2

将table-layout设置为fixed会对此有所帮助。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

使用text-align: right;更改对齐方式，并使用:nth-child - 选择器

选择表格列

＆＃13;

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;
}

td:nth-child(1) {
  text-align: right;
}

th {
  text-align: center;
  width: 300px;
  background: #DFDFDF;
  /* Darken header a bit */
  font-weight: bold;
}

＆＃13;

<!-- taken from here https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro as dummy -->
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

＆＃13;

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

3 个答案: