user38034 user38034 - 1 year ago 160
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.

<link href="//" rel="stylesheet">

<tr class="header">
<th>Last Name</th>

<tr class="row">

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).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download