Центрирование нескольких td в таблице

Question

Я создаю строку в реальном времени и задаюсь вопросом, как я могу сосредоточить «Манчестер 2-3 манчестер», так что HYPHEN всегда находится в одном и том же месте, независимо от количества строк, команд и очков ? Вот моя скрипка:

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>. Затем вы можете поместить столбцы по своему желанию. Детали в значительной степени зависят от стиля в целом. В следующем примере я удалил фиксированную ширину, чтобы ширина столбца таблицы определялась браузером.

Кстати, оценки лучше написаны с помощью en dash, а не дефисом, и без интервала, например. 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 2

Вы могли бы сделать это CSS:

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

Это будет центрировать таблицу на странице и дефиса должно быть довольно близко. Это может быть несколько пикселей, если это что-то вроде 12-3 или 3-12 (2 буквы на одной стороне 1 письмо на другом). Единственный способ обхода, который я вижу, - создать еще одну строку только дефиса.

Answer 3

Вы должны добавить текст в соответствие с вашим css. Я добавил его к jsfiddle: http://jsfiddle.net/fgLeL6hx/

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

И никогда не оставляйте пробелов в классе или Ид имен.

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