Home / Questions / 387036
Accepted
Fernanda
Asked: 2020-09-04 04:13:16 +0800 CST 2020-09-04 04:13:16 +0800 CST

How to style a table selection?

  • 772

I have to layout a website that has the table in the photo, I'm using bootstrap and I've already managed to round the edges, but I can't find anything on how to edit the cells when they're selected... I don't handle much js either... and I don't know how I should perform that behavior. Could you guide me a little (to know at least what I should look for to get the blue contours laid out) then the devs are going to do the magic, but I don't even know where the trick begins hahaha. Thank you so much for rescuing me from this dead end.

I leave below the code that I have so far (it is a basic bootstrap table with a rounded edge)

how should the table look

.table {
  border-collapse: separate;
  border: 1px solid transparent;
  border-spacing: 0;
  border-radius: 8px;
}

.table tr td,
.table tr th {
  border: 1px solid green;
}

.table thead tr th:first-child {
  border-radius: 8px 0px 0px 0px;
}

.table thead tr th:last-child {
  border-radius: 0px 8px 0px 0px;
}

.table tbody tr:last-child th:first-child {
  border-radius: 0px 0px 0px 8px;
}

.table tbody tr:last-child td:last-child {
  border-radius: 0px 0px 8px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered r">
  <thead>
    <tr class="">
      <th scope="col">#</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">2</th>
      <td>@fat</td>
    </tr>
  </tbody>
</table>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

try giving it border-left, but it stays inside the table, not outside border attempt

css3

2 Answers

  1. If you say that table cells are to be editable by users, there is something in Bootstrap that comes very close to what you need. The .input-group.

    Using these you could make the tab they have with .input-group-prependhidden until you need it.

    I put together a quick example for you to see. Clicking on one of the rows would cause the tab to appear.

    $(function () {
  $('.input-group').click(function () {
    let elemento = $(this);
    
    $('.input-group').removeClass('seleccionada');
    elemento.addClass('seleccionada');
  });
});
    .input-group-prepend {
  visibility: hidden;
}

.seleccionada .input-group-text {
  background-color: blue;
  border-color: blue;
  color: white;
}

.seleccionada .form-control:focus {
  border-color: blue;
  box-shadow: 0 0 0 0rem rgba(0,123,255,.25);
}

.seleccionada .input-group-prepend {
  visibility: visible;
}

.seleccionada .form-control {
  border: 1px solid blue;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
  </div>

  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    • 2
  2. Best Answer

    There is a framework called JExcel that does exactly what you ask for:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jexcel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jexcel.min.css">

<div id="table"></div>

<script>
data = [
  ['#', 'Handle'],
  [2, '@fat']
];

$('#table').jexcel({
  data:data, colWidths: [ 200, 200, 200 ]
})
</script>

    You can find more information here .

    • 2