Выравнивание столбцов таблицы CSS

Question

Я редактирую электронные книги в формате электронного паба. Я использую CSS для создания макета книги. Я столкнулся с проблемой выравнивания столбцов таблицы, и я не знаю, как с этим справиться. Таблица содержит текстовые заголовки для каждого столбца, а затем числовое содержимое ячеек. Ширина столбца задается заголовком, что в некоторых случаях делает столбец очень широким по сравнению с содержимым ячеек.

Я хочу выровнять по порядку номера в столбце до последней цифры. Но я хотел бы, чтобы они были помещены больше в центр колонны. Команда «text-align: right» выравнивает числа в правой части ячейки. Есть ли способ переместить все числа в центр, сохраняя при этом все выровненные по правому краю до последней цифры?

Answer 1

Вот несколько способов, которые могли бы могли бы работать для вас

table { 
 
    width: 400px; 
 
    border: 1px solid gray; 
 
} 
 
td { 
 
    text-align: center; 
 
    border: 1px solid gray; 
 
    width: 33%; 
 
} 
 
span { 
 
    display: inline-block; 
 
    width: 40%; 
 
    background: #eee; 
 
    text-align: right; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <span> 
 
     nr 1 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     nr 12 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     nr 123 
 
     </span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <span> 
 
     nr 123 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     nr 12 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     nr 1 
 
     </span> 
 
    </td> 
 
    </tr> 
 
</table>

Пример 2

table { 
 
    width: 400px; 
 
    border: 1px solid gray; 
 
} 
 
td { 
 
    text-align: center; 
 
    border: 1px solid gray; 
 
    width: 33%; 
 
} 
 
span { 
 
    display: inline-block; 
 
    width: 50%; 
 
    background: #eee; 
 
    text-align: right; 
 
} 
 
span span { 
 
    float: left; 
 
    text-align: left; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <span> 
 
     <span> 
 
      id 
 
     </span> 
 
     1 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     <span> 
 
      cnt 
 
     </span> 
 
     12 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     <span> 
 
      code 
 
     </span> 
 
     123 
 
     </span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <span> 
 
     <span> 
 
      code 
 
     </span> 
 
     123 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     <span> 
 
      cnt 
 
     </span> 
 
     12 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     <span> 
 
      id 
 
     </span> 
 
     1 
 
     </span> 
 
    </td> 
 
    </tr> 
 
</table>