Question

我怎样才能使它彼此对齐。我只使用bootstrap表类和CSS。并试图弄明白这件事。我的看法是它的变化取决于文本的宽度。

这是我的代码到目前为止，它是在手风琴btw内。：

        <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

添加您自己的类以覆盖引导选择器：

.table tbody>tr>td.vert-align
{
    vertical-align: middle;
}

然后将其添加到您的tds

<td class="spec-content vert-align"></td>

Answer 2

您需要添加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;
}

示例bus-stop map

bootstrap - 将表数据相互对齐

2 个答案: