CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3vertical-alignment
Harsha M V
Harsha M V

Reputation: 54989

Bootstrap3 - Vertical Center Align Table Content

I have a Table structure as follows.

<div class="table-responsive">
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Type</th>
                <th class="actions">Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="event-object">
                        <a href="#" class="pull-left">
                            <img src="images/event-small.jpg" width="48" height="48" alt="Event Name">
                        </a>
                        <div class="event-info">
                            <h5 class="event-heading">Bangalore Fashion Week</h5>
                            <p>Sheraton, Bangalore</p>
                        </div>
                    </div>
                </td>
                <td>Conference</td>
                <td>
                    <div class="table-controls"> 
                        <a href="#" class="btn btn-xs btn-default">
                            <i class="fa fa-pencil"></i>
                        </a> 
                        <a href="#" class="btn btn-xs btn-default">
                            <i class="fa fa-times"></i>
                        </a> 
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Since the first column is larger in height, I would want the other table columns to the center vertically to have a good seamless look in the table.

Upvotes: 1

Views: 15419

Answers (2)

Hashem Qolami
Hashem Qolami

Reputation: 99564

You could give vertical-align: middle; to the table cells. However since Twitter bootstrap uses selectors like .table>tbody>tr>td which has a higher specificity value than simple td or table td you have to use the same selector or another one having higher specificity value to override the bootstrap's default styling:

Example Here

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

Upvotes: 13

Darshak Shekhda
Darshak Shekhda

Reputation: 646

.table-responsive>.table>tbody>tr>td{
    vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
              <table class="table table-striped table-hover">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th class="actions">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><div class="event-object"><a href="#" class="pull-left"> <img src="images/event-small.jpg" width="48" height="48" alt="Event Name"> </a>
                        <div class="event-info">
                          <h5 class="event-heading">Bangalore Fashion Week</h5>
                          <p>Sheraton, Bangalore</p>
                        </div>
                      </div></td>
                    <td>Conference</td>
                    <td><div class="table-controls"> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-pencil"></i></a> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-times"></i></a> </div></td>
                  </tr>
                </tbody>
              </table>
            </div>
i am giving vertical-align: middle; to td

try this example

Upvotes: 1

Related Questions