CODEWITHSUNDEEP
javascripthtmlcssrowhtml-table
edisonmecaj
edisonmecaj

Reputation: 1142

HTML Table Outside border multiple TR

I have a html table and it haves some rows with rowspan, The simple border of the td is 1px solid black, but I need to make a thicker border on the Row group with rowspan. Sorry for my English, I'm going to add an image to be more clear.

This is how I need to make the table:
enter image description here
I tryed to add

table tr{
  border: 2px solid black;
}

But it make thicker the rows without rowspan too.
Does somebody have a solution in CSS or JS?

table{
  border-collapse: collapse;
  text-align: center;
}
table td, table th{
  border:1px solid black;
  padding: 0px 14px;
}
<table>
  <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
  </tr>
  <tr>
    <td rowspan="3">val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td rowspan="3">val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td rowspan="3">val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
</table>

Upvotes: 4

Views: 2537

Answers (1)

DaniP
DaniP

Reputation: 38252

If you can modify your actual markup you can use multiple tbody elements, and then style:

table {
  border-collapse: collapse;
  text-align: center;
}
table td,
table th {
  border: 1px solid black;
  padding: 0px 14px;
}
table tbody {
  border: 4px solid black;
}
<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">val</td>
    </tr>
    <tr>
      <td>val</td>
      <td>val</td>
    </tr>
    <tr>
      <td>val</td>
      <td>val</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="3">val</td>
    </tr>
    <tr>
      <td>val</td>
      <td>val</td>
    </tr>
    <tr>
      <td>val</td>
      <td>val</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="3">val</td>
    </tr>
    <tr>
      <td>val</td>
      <td>val</td>
    </tr>
    <tr>
      <td>val</td>
      <td>val</td>
    </tr>
  </tbody>
</table>

If you can't modify your actual markup and you can use Jquery you can make it this way:

$(document).ready(function() {
  //Remove the actual tbody
  $('tr').unwrap();

  //Give the th a thead element
  $('th').first().parent('tr').wrap('<thead></thead>');

  //Evaluate wich td has rowspan and wrap on tbody based on number of rowspans
  $('td').each(function() {
    if ($(this).attr("rowspan") != undefined) {
      var numb = parseInt($(this).attr("rowspan"), 10),
          par = $(this).parent('tr').index('tr');
      $("tr").slice(par, par + numb).wrapAll('<tbody></tbody>')
    }
  })
})

Check the Snippet

$(document).ready(function() {
  $('tr').unwrap();
  $('th').first().parent('tr').wrap('<thead></thead>');
  $('td').each(function() {
    if ($(this).attr("rowspan") != undefined) {
      var numb = parseInt($(this).attr("rowspan"), 10),
        par = $(this).parent('tr').index('tr');
      $("tr").slice(par, par + numb).wrapAll('<tbody></tbody>')
    }
  })
})
table {
  border-collapse: collapse;
  text-align: center;
}
table td,
table th {
  border: 1px solid black;
  padding: 0px 14px;
}
table tbody {
  border: 4px solid purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
  </tr>
  <tr>
    <td rowspan="3">val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td rowspan="3">val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td rowspan="3">val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
</table>

Upvotes: 3

Related Questions