Bootstrap - Paint a whole line and less a specific column

Question

Bootstrap - Paint a whole line and less a specific column

Navigation

#1 by (3 votes)

1

The above code 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><linkhref="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>

jquery bootstrap-4 table

asked by anonymous 03.01.2018 / 04:20

1 answer

Mask CURRENCY {en-us} in GridView C # Error: Incompatible Types

score 3 · Accepted Answer

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

Insert in the CSS:

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

If this is the first fact column in the table, just change the background to .table tr td:nth-child(2){ .

See in JSFiddle