html - 在表格中居中几个 td

Question

我正在创建实时比分行，想知道如何将“埃弗顿 2-3 曼彻斯特联队”居中，以便无论行、球队和比分大小如何，HYPHEN 始终位于同一位置？这是我的 fiddle :

http://jsfiddle.net/fgLeL6hx/

.match-table {
    width: 100%;
    border:1px solid;
    height: 38px;
}

.match-icon {
    width: 38px;
    height: 38px;
}

.match-time {
    width: 38px;
    height: 38px;
}

html:

 <table cellspacing="0" cellpadding="0" class="match-table">
    <tbody>
        <tr class="tr-first odd">
            <td class="match-icon" >PBL</td>

            <td class="match-home">Everton</td>
            <td class="match-score">2 - 3</td>
            <td class="match-away" >Manchester United</td>
            <td class="match-time">22:00</td>

        </tr>
    </tbody>    
</table>

Answer 1

唯一会使连字符不出现在所有行的相同位置的是它两边的数字可能采用不同的宽度。 (表格格式负责其余部分。)但这很棘手。理论上，HTML 和 CSS 允许我们将列的单元格与特定字符对齐。实际上，这从未在任何浏览器中实现过。

处理此问题的方法是将包含分数的列拆分为三列(或两列)。而不是 <td>12 - 0</td>你会有 <td>12</td> <td>-</td> <td>0</td> .然后您可以根据需要设置列的样式。细节在很大程度上取决于整体造型。在下面的示例中，我删除了固定宽度，使表格列宽由浏览器确定。

顺便说一句，分数最好用破折号而不是连字符书写，并且没有空格，例如2–3 而不是 2 - 3。尽管可以使用小间距。我提到这一点是因为在考虑样式细节之前应该解决这些问题。

.match-table {
    border:1px solid;
    height: 38px;
}

.match-icon {
    height: 38px;

}

.match-time {
    height: 38px;
    text-align: right;
}

td {
    padding-left: 0.1em;
    padding-right: 0.2em; 
}
td:nth-child(3), td:nth-child(5) {
    text-align: right;
}

<table cellspacing="0" cellpadding="0" class="match-table"><tbody>
<tr class="tr-first odd">
    <td class="match-icon" >PBL</td>
    <td class="team-home">Everton</td>
    <td>2</td> <td>-</td> <td>3</td>
    <td class="team-away bold" ><span class="padl">Manchester United<span class="racard racard1">&nbsp;</span></span></td>
    <td class="match-time">22:00</td>
   <tr class="tr-first odd">
    <td class="match-icon" >XY</td>
    <td class="team-home">Foo</td>
     <td>12</td> <td>-</td> <td>0</td>
    <td class="team-away bold" ><span class="padl">Bar<span class="racard racard1">&nbsp;</span></span></td>
    <td class="match-time">9:00</td> 
</tr>
</tbody>    
</table>