Styling Table Rows with CSS Cross-Banding

Question

Styling Table Rows with CSS Cross-Banding

I am striving to achieve a particular visual effect:

https://i.sstatic.net/xbuBq.png

The HTML code I am working with involves a basic table structure:

<table id="a">
  <thead>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tfoot>
</table>

To achieve rounded borders, I need to change the td elements to display as inline-block.

My challenge arises with the grey bands between rows. There are white spaces which I do not want. Unfortunately, I cannot use a separate background element because the number of rows may vary. edit: I require spacing between borders but wish for the white gaps in the grey column to be grey as well...

You can view my attempts here: https://jsfiddle.net/h5Lh1eaw/24/

Is there a solution using CSS that I am unaware of?

html css

Answer 1

Answer №1

Absolutely! In order to achieve the desired effect, you must apply border-collapse: collapse to the <table>. Here is how your CSS should look:

CSS

table#a, table#b {
  border-collapse: collapse;
}

Preview:

https://i.sstatic.net/Rpitz.png

Snippet

* {
  box-sizing: border-box;
}

table#a {
  border-collapse: collapse;
}

table#b {
  border-collapse: collapse;
}

td:nth-child(2) {
  background-color: #c0c0c0;
}

tbody tr {
  margin: 5px;
}

td {
  display: inline-block;
  padding: 3px;
  width: 200px;
}

tbody td {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

tbody td:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left: 1px solid black;
}

tbody td:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid black;
}

<p>
  A:
</p>
<table id="a">
  <thead>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tfoot>
</table>
<p>
  B:
</p>
<table id="b">
  <thead>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tfoot>
</table>

JSFiddle: https://jsfiddle.net/gfqrL8n0/

Answer 2

Absolutely! In order to achieve the desired effect, you must apply border-collapse: collapse to the <table>. Here is how your CSS should look:

CSS

table#a, table#b {
  border-collapse: collapse;
}

Preview:

https://i.sstatic.net/Rpitz.png

Snippet

* {
  box-sizing: border-box;
}

table#a {
  border-collapse: collapse;
}

table#b {
  border-collapse: collapse;
}

td:nth-child(2) {
  background-color: #c0c0c0;
}

tbody tr {
  margin: 5px;
}

td {
  display: inline-block;
  padding: 3px;
  width: 200px;
}

tbody td {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

tbody td:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left: 1px solid black;
}

tbody td:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid black;
}

<p>
  A:
</p>
<table id="a">
  <thead>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tfoot>
</table>
<p>
  B:
</p>
<table id="b">
  <thead>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tfoot>
</table>

JSFiddle: https://jsfiddle.net/gfqrL8n0/

Answer 3

Answer №2

To achieve the desired appearance of the gaps, one option is to enclose the cell content within a span element.

* {
  box-sizing: border-box;
}
td:nth-child(2),
td:nth-child(3) {
  background-color: #c0c0c0;
}

table {
  border-spacing:6px 0;  /* gap between columns */
}

td {
  padding: 3px 0;       /* gap between rows */
  width: 200px;
}
thead td,
tfoot td {
  padding:3px;         /* match padding of span */
}

tbody td > span {
  padding:3px;        
  position:relative;
  display:block;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

tbody td > span:after {           
  content:'';
  display:block; 
  position:absolute; 
  left:100%;
  top:-1px;
  bottom:-1px;
  width:6px;                     
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

tbody td:first-child > span {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left: 1px solid black;
}

tbody td:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid black;
}

tbody td:last-child > span:after {
  display:none;
}

<table id="a">
  <thead>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>normal</span></td>
      <td><span>grey</span></td>
      <td><span>grey</span></td>
      <td><span>normal</span></td>
    </tr>
    <tr>
      <td><span>normal</span></td>
      <td><span>grey</span></td>
      <td><span>grey</span></td>
      <td><span>normal</span></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tfoot>
</table>

Another approach is to use pseudo elements for borders instead of spans.

* {
  box-sizing: border-box;
}
td:nth-child(2),
td:nth-child(3) {
  background-color: #c0c0c0;
}

table {
  border-spacing:6px 0;  
}

td {
  width: 200px;
}
thead td,
tfoot td {
  padding:3px;         
}

tbody td {
  padding: 6px 3px;       
  position: relative;
}

tbody td:after {          
  content:'';     
  display:block;
  position:absolute; 
  left:0;
  right: -6px;              
  top:3px;                 
  bottom:3px;             
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

tbody td:first-child:after {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left: 1px solid black;
}

tbody td:last-child:after {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid black;
  right: -3px;                    
}

<table id="a">
  <thead>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tfoot>
</table>

Answer 4

To achieve the desired appearance of the gaps, one option is to enclose the cell content within a span element.

* {
  box-sizing: border-box;
}
td:nth-child(2),
td:nth-child(3) {
  background-color: #c0c0c0;
}

table {
  border-spacing:6px 0;  /* gap between columns */
}

td {
  padding: 3px 0;       /* gap between rows */
  width: 200px;
}
thead td,
tfoot td {
  padding:3px;         /* match padding of span */
}

tbody td > span {
  padding:3px;        
  position:relative;
  display:block;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

tbody td > span:after {           
  content:'';
  display:block; 
  position:absolute; 
  left:100%;
  top:-1px;
  bottom:-1px;
  width:6px;                     
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

tbody td:first-child > span {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left: 1px solid black;
}

tbody td:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid black;
}

tbody td:last-child > span:after {
  display:none;
}

<table id="a">
  <thead>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>normal</span></td>
      <td><span>grey</span></td>
      <td><span>grey</span></td>
      <td><span>normal</span></td>
    </tr>
    <tr>
      <td><span>normal</span></td>
      <td><span>grey</span></td>
      <td><span>grey</span></td>
      <td><span>normal</span></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tfoot>
</table>

Another approach is to use pseudo elements for borders instead of spans.

* {
  box-sizing: border-box;
}
td:nth-child(2),
td:nth-child(3) {
  background-color: #c0c0c0;
}

table {
  border-spacing:6px 0;  
}

td {
  width: 200px;
}
thead td,
tfoot td {
  padding:3px;         
}

tbody td {
  padding: 6px 3px;       
  position: relative;
}

tbody td:after {          
  content:'';     
  display:block;
  position:absolute; 
  left:0;
  right: -6px;              
  top:3px;                 
  bottom:3px;             
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

tbody td:first-child:after {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left: 1px solid black;
}

tbody td:last-child:after {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid black;
  right: -3px;                    
}

<table id="a">
  <thead>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tfoot>
</table>

Answer 5

Answer №3

Review this CSS code snippet:

* {
        box-sizing: border-box;
    }

    table#a {
        border-spacing: 5px, 0;
    }

    table#b {
        border-collapse: collapse;
    }

    td {
        background-color: #c0c0c0;
        border-right: 5px solid #FFFFFF;
    }

    td:nth-child(1) {
        background-color: #ffffff;
    }

    tbody tr {
        margin: 5px;
    }

    td {
        display: inline-block;
        padding: 3px;
        width: 200px;
    }

    tbody td {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }

    tbody td:first-of-type {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-left: 1px solid black;
    }

    tbody td:last-of-type {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-right: 1px solid black;
    }

Take a look at the image snippet provided below

https://i.sstatic.net/y8qMs.png

Answer 6

Review this CSS code snippet:

* {
        box-sizing: border-box;
    }

    table#a {
        border-spacing: 5px, 0;
    }

    table#b {
        border-collapse: collapse;
    }

    td {
        background-color: #c0c0c0;
        border-right: 5px solid #FFFFFF;
    }

    td:nth-child(1) {
        background-color: #ffffff;
    }

    tbody tr {
        margin: 5px;
    }

    td {
        display: inline-block;
        padding: 3px;
        width: 200px;
    }

    tbody td {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }

    tbody td:first-of-type {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-left: 1px solid black;
    }

    tbody td:last-of-type {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-right: 1px solid black;
    }

Take a look at the image snippet provided below

https://i.sstatic.net/y8qMs.png

Styling Table Rows with CSS Cross-Banding

Answer №1

Answer №2

Answer №3

Similar questions

Ways to increase the count in Vue Class Bindings?

What could be causing the removeChild() method to fail when trying to delete a list item in JavaScript DOM manipulation?

Update array when checkbox is selected/deselected

Attempting to dynamically add an image to a template snippet

displaying html with embedded php script

the dropdown menu toggle is not working as expected

Identifying elements using xpath - Streamlined Xpath Techniques

Is it possible to stop content from spilling out of an HTML element by automatically resizing its children?

The function in JavaScript that is supposed to receive a value from a servlet is malfunctioning

Swapping a Cube Mesh for a Car Mesh in ThreeJS

What is the best way to transfer information from Swift to JavaScript and showcase it in a web view?

Encountering an error message stating that the "@font-face declaration does not adhere to the fontspring bulletproof syntax" while attempting to integrate a custom font

What could be the reason why my JavaScript code for adding a class to hide an image is not functioning properly?

Insert a variety of images onto the page at the exact position where the user has

Utilizing Python to dynamically create unique tags from deeply nested dictionaries through recursion

Shifting the placement of a button with the help of bootstrap

After being reloaded multiple times, the time and date mysteriously vanish

Understanding the dissimilarities between the input:disabled and input[disabled] CSS selectors

Refreshing Your WordPress Post Automatically

Leveraging a jQuery variable as the identifier for an element