html - bootstrap-相互对齐表数据

我怎样才能使这一点相互协调。我只使用bootstrap表类和CSS。想办法解决这个问题。我的看法是它的变化取决于文本的宽度。

这是我目前的密码，在一个手风琴内

        <table class = "table">
            <tbody>
                <tr>
                        <thead>
                            <h1>DIMENSIONS</h1>
                        </thead>

                        <tr>
                            <td class = "spec-header">
                                    <h2>Overall(Length x Width x Height)</h2>
                            </td>

                            <td class = "spec-content">
                                   <p>4,410 x 1,700 x 1,1475</p>
                            </td>
                        </tr>
                        <tr>
                            <td class = "spec-header">
                                    <h2>Wheelbase</h2>
                            </td>

                            <td class = "spec-content">
                                   <p>2,550mm</p>

                            </td>
                        </tr>
                        <tr>
                            <td class = "spec-header">
                                    <h2>Tread(Front/Rear)</h2>
                            </td>

                            <td class = "spec-content">
                                   <p>1,475/1460</p>

                            </td>
                        </tr>


                </tr>
            </tbody>

最佳答案

您需要添加vertical-align:middle;

.table>tbody>tr>td,
.table>tbody>tr>th, .table>tfoot>tr>td,
.table>tfoot>tr>th, .table>thead>tr>td,
.table>thead>tr>th{
  vertical-align:middle;
}

示例here