bootstrap - Align table data with each other

user_6545383 0
Viewed 87

how can i make this align with each other. i'm using bootstrap table classes and CSS only. and trying to figure this thing out. my take is it's changing depends on the width of the text.

enter image description here

This is my code so far and it's inside an accordion 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>
twitter-bootstrap css html
2 Answers

Add your own class to override the bootstrap selector:

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

And then add it to your tds

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

you need to add 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;
}

example here

user_22515150
Related