JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tba">
    <tr>
        <td id="prvs">назад</td>
        <td id="ids">
            <span class="spnid">1</span>
            <span class="spnid">2</span>
            <span class="spnid">3</span>
        </td>
        <td id="nxt">далее</td>
    </tr>
</table>

<!--Ширина span'а работает, если добавить свойство float: left;, однако, если мы добавим его, номера перестанут центроваться. Интересует кроссбраузерное решение на HTML5. Большое спасибо.-->

CSS

#tba {
    width: 500px;
    height: 30px;
    background-color: #eee;
}
#prvs, #nxt {
    width: 100px;
    text-align: center;
    background-color: #666;
    text-transform: uppercase;
}
#ids {
    width: 300px;
    text-align: center;
    overflow: hidden;
}
.spnid {
    width: 20px;
    height: 20px;
    margin-left: 3px;
    margin-right: 3px;
    border: 1px solid #000;
    background-color: #ddd;
}