CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jmv
jmv

Reputation: 415

bootstrap - Align table data with each other

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>

Upvotes: 2

Views: 132

Answers (2)

Vincent1989
Vincent1989

Reputation: 1657

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

Upvotes: 1

kerrin
kerrin

Reputation: 3454

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>

Upvotes: 1

Related Questions