CODEWITHSUNDEEP
htmlcss
cloudseeker
cloudseeker

Reputation: 275

Grouping two <TR> together to style as TBODY not styling

For some reason, I have tried styling the <tbody> but it doesn't matter how much of the existing styles I pull out, it doesn't make any difference.

Theoretically, the following should work, but doesn't...

tbody {
  border: 1px solid #2696A1;
  width: 100%;
  border-spacing: 0px;
  margin-top: 2px;
  margin-bottom: 2px;
  page-break-inside: avoid;
  border-collapse: collapse;
}
<table>
  <tbody>
    <tr>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
    </tr>
  </tbody>
</table>

The ultimate goal (unless a better suggestion presents itself) is to wrap the <tbody> with a border around two <tr> so they are visually identifiable as together. The top <tr> is always visible but the second (or more) are not (due to jQuery toggling of the additional information. Normally I would wrap this in a <div> and call it a day but I need the table format from the header of this dynamic table so everything stays in it's appropriate columns and doesn't go drifting off into neverland.

Any ideas or suggestions would be fantastic. :-)

Upvotes: 0

Views: 56

Answers (1)

Hanif
Hanif

Reputation: 3795

I think the tbody for define boundary as a virtual manner and increase human readability. However instead of styling tbody you can use td tricky way to achieve the goal. Even tr also not a good place to apply styling. You should target td, th etc. Please try following way to apply border:

    table {
      width: 100%;
      border-spacing: 0px;
      margin-top: 2px;
      margin-bottom: 2px;
      page-break-inside: avoid;
      border-collapse: collapse;
    }
    tbody > tr:first-child > td {
        border-top: 1px solid #2696A1;
    }
    tbody > tr > td:first-child {
        border-left: 1px solid #2696A1;
    }
    tbody > tr > td:last-child {
        border-right: 1px solid #2696A1;
    }
    tbody > tr:last-child > td {
        border-bottom: 1px solid #2696A1;
    }

Upvotes: 1

Related Questions