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如何讓一個表中的所有元素在同一個點結束

回答

相關問題