CSS如何让一个表中的所有元素在同一个点结束

我想对齐我的表，以便每个团队名称/徽标在表中的相同位置结束，而不管团队名称的长度。例如，一个名字短的团队比一个名字长的团队结束的时间短，这使得该团队不满意。我想从这改变它。CSS如何让一个表中的所有元素在同一个点结束

Torino (logo)    VS   (logo) Lazio 

Juventus (logo)   VS    (logo) Bologna 

Benevento (logo)   VS   (logo) SPAL

TO THIS

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

来源

2017-11-10 Workkkkk

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

来源

2017-11-10 23:04:37 Phix

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

来源

2017-11-10 23:00:54 Kurt

理论上，这工作，但我还是想的名称和标识是在中间，虽然。这只是将它一路推到左边或右边 – Workkkkk

这适用于一个小填充 – Workkkkk

使用text-align: right;改变对准和使用:nth-child -selector

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

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

选择表列

来源

2017-11-10 23:03:18 SourceOverflow

CSS如何让一个表中的所有元素在同一个点结束

回答

相关问题