Question

我正在创建一个比分直播并且想知道我如何能够将中锋排在第二位的曼彻斯特联队＆＃34;因此，无论行，团队和分数大小，HYPHEN总是在同一个地方？这是我的小提琴：

.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

你可以做这个CSS：

table {
    margin:1em auto 1em auto;
}
td {
    text-align:center;
}

这会使表格在页面上居中，连字符应该非常接近。如果它像12-3或3-12（一边是2个字母，另一边是1个字母），可能会关闭几个像素。我看到的解决方法的唯一方法是创建另一行连字符。

Answer 2

您应该为css添加text-align。我把它添加到你的jsfiddle：http://jsfiddle.net/fgLeL6hx/

＆＃13;

.team-home {
    text-align: center;
}
.score-bold{
    text-align: center;
}
.team-away-bold{
    text-align: center;
}

＆＃13;

永远不要在课堂或id-name中留下空格。

Answer 3

唯一能使连字符不出现在所有行的相同位置的是它的两侧数字可能采用不同的宽度。（表格格式化处理其余部分。）但这很棘手。理论上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>

Answer 4

说到宽度，我更喜欢百分比。

如果我理解你的问题，这个CSS应该可以帮到你：

Fiddle

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

.match-icon {
    width: 10%;
    height: 38px;
    text-align:left;
}

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

table td{
    width: 27%;
    text-align:center;
}

你的桌子里有5个。所以100/5 = 20.我们需要20％的宽度。但是第一个和最后一个不需要那个空间（曼联甚至不适合20％......）我决定给第一个和最后一个10％的宽度。我们还剩下什么？ 80％。 80 / 3~ = 27

如果您对此不满意，这将使您的内容宽度超过100％（可能是100.xxx），您可以给予26％或减少10％。

在桌子中居中几个td

4 个答案: