Bootstrap - Paint a whole row less a specific column

Question

The code above almost works, just can not paint in the first column, how can I solve this ?

$('table').on('click', 'tr', function () {
    if ($(this).hasClass('table-info')) {
        $(this).removeClass('table-info');
    }
    else {
    $('tr.table-info').removeClass('table-info');
        $(this).addClass('table-info');
    }
});

.container-table {
  display: table;
}

.container-table-row {
  display: table-row;
}

.container-table-cell {
  display: table-cell;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-table">
  <div class="container-table-row">
    <div class="container-table-cell">
      <table class="table table-responsive">
        <thead>
          <tr>
            <th>#</th>
            <th>Primeira coluna</th>
            <th>Segunda coluna</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 1

You can select all the td of first column (which in this case is the second in the table) and define a background in CSS. This way the class included in jQuery will not affect the column.

Enter in the CSS:

.table tr td:nth-child(2){
  background: white;
}

If it’s the first column in fact table, just change the .table tr td:nth-child(2){ for .table th{.

See on Jsfiddle