html - bootstrap - 将表数据相互对齐

Question

我怎样才能使它们相互对齐。我只使用 Bootstrap 表类和 CSS。并试图弄清楚这件事。我认为它的变化取决于文本的宽度。

到目前为止，这是我的代码，顺便说一句，它位于 Accordion 内部。 :

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

Answer 1

你需要添加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