user38034 user38034 - 9 months ago 66
CSS Question

Bootstrap table row offset

Here is a really strange effect. I create a table with two rows. The second row is somehow shifted magically 1 cell to the right.
Try it.

<html>
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<table>
<tr class="header">
<th>ID</th>
<th>Last Name</th>
</tr>

<tr class="row">
<td>1</td>
<td>Smith</td>
</tr>
</table>
</body>
</html>


Why does this effect appear? How can I remove it?

Answer Source

The class .row has a special definition in bootstrap - you shouldn't use it for a table row. With this class, a pseudo element is added to the element with these settings:

.btn-group-vertical > .btn-group::after, .btn-group-vertical > .btn-group::before, .btn-toolbar::after, .btn-toolbar::before, .clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .dl-horizontal dd::after, .dl-horizontal dd::before, .form-horizontal .form-group::after, .form-horizontal .form-group::before, .modal-footer::after, .modal-footer::before, .modal-header::after, .modal-header::before, .nav::after, .nav::before, .navbar-collapse::after, .navbar-collapse::before, .navbar-header::after, .navbar-header::before, .navbar::after, .navbar::before, .pager::after, .pager::before, .panel-body::after, .panel-body::before, .row::after, .row::before {
    display: table;
    content: " ";
}

This creates a conflict in a regular table.

So, just erase the "row" class from your tr tag to avoid this (i.e. use a class with another name if you need one).