The gaps separating rows

Question

The gaps separating rows

I'm struggling with getting my divs to look like a table, especially when it comes to highlighting a selected row. I've tried adjusting padding and margins without success. Does anyone have any suggestions on how I can achieve this effect?

.table {
  display: table;
}
.header {
  display: table-header-group;
  font-weight: bold;
}
.row {
  display: table-row-group;
}
.cell {
  display: table-cell;
  border: 1px solid black;
  padding: 5px;
}
.selected {
  background: red;
  margin: 20px;
  border: 1px solid red;
  border-radius: 10px;
}

<div class="table">
  <div class="header">
    <div class="cell">Header 1</div>
    <div class="cell">Header 2</div>
  </div>
  <div class="row selected">
    <div class="cell">Row 1 Cell 1</div>
    <div class="cell">Row 1 Cell 2</div>
  </div>
  <div class="row">
    <div class="cell">Row 2 Cell 1</div>
    <div class="cell">Row 2 Cell 2</div>
  </div>
  <div class="row">
    <div class="cell">Row 3 Cell 1</div>
    <div class="cell">Row 3 Cell 2</div>
  </div>
</div>

html css

Answer 1

Answer №1

Does this meet your requirements?

$('.list-item').on('click', function () {
    $('.table-content div').removeClass('active');
    $(this).addClass('active');
});

Fiddle: http://jsfiddle.net/9mthwzq1/

Note: It seems like you're more interested in the CSS design aspect rather than the functionality. In that case, one suggestion could be to use a absolutely positioned div on the selected item.

Answer 2

Does this meet your requirements?

$('.list-item').on('click', function () {
    $('.table-content div').removeClass('active');
    $(this).addClass('active');
});

Fiddle: http://jsfiddle.net/9mthwzq1/

Note: It seems like you're more interested in the CSS design aspect rather than the functionality. In that case, one suggestion could be to use a absolutely positioned div on the selected item.

Answer 3

Answer №2

Perhaps this solution can assist you:

.table {
    display: table;
    border: 1px solid black;
    border-bottom: 0;
}

.row {
    display: table-row-group;
}

.header .{
    display: table-header-group;
    font-weight: bold;
    
}

.cell {
    display: table-cell;
    padding: 5px;
    border-bottom: 1px solid black;
  
}

.cell:first-child{
    border-right: 1px solid black;
}


.selected + .row .cell{
    border-top: 1px solid black;
}

.selected .cell{
    background: red;
 
}

.selected .cell:first-child{
    border-right: 0;
    border-radius: 10px 0 0 10px;
    border-bottom: 0px;
}
  
.selected .cell:nth-child(2){
    border-radius: 0 10px 10px 0;
    border-bottom: 0px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
<div class="table">
<div class="row header">
    <div class="cell">Header 1</div>
    <div class="cell">Header 2</div>
</div>
<div class="row selected">
    <div class="cell">Row 1 Cell 1</div>
    <div class="cell">Row 1 Cell 2</div>
</div>
<div class="row">
    <div class="cell">Row 2 Cell 1</div>
    <div class="cell">Row 2 Cell 2</div>
</div>
<div class="row footer">
    <div class="cell">Row 3 Cell 1</div>
    <div class="cell">Row 3 Cell 2</div>
</div>
  
</body>
</html>

The issue lies in the fact that the padding property does not apply to elements with display: table-row-group, table-header-group, table-footer-group, table-row, table-column-group, and table-column.

For more information, you can refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/padding

Check out an example here: http://jsbin.com/tofokoriri/edit?html,css,output

Answer 4

Perhaps this solution can assist you:

.table {
    display: table;
    border: 1px solid black;
    border-bottom: 0;
}

.row {
    display: table-row-group;
}

.header .{
    display: table-header-group;
    font-weight: bold;
    
}

.cell {
    display: table-cell;
    padding: 5px;
    border-bottom: 1px solid black;
  
}

.cell:first-child{
    border-right: 1px solid black;
}


.selected + .row .cell{
    border-top: 1px solid black;
}

.selected .cell{
    background: red;
 
}

.selected .cell:first-child{
    border-right: 0;
    border-radius: 10px 0 0 10px;
    border-bottom: 0px;
}
  
.selected .cell:nth-child(2){
    border-radius: 0 10px 10px 0;
    border-bottom: 0px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
<div class="table">
<div class="row header">
    <div class="cell">Header 1</div>
    <div class="cell">Header 2</div>
</div>
<div class="row selected">
    <div class="cell">Row 1 Cell 1</div>
    <div class="cell">Row 1 Cell 2</div>
</div>
<div class="row">
    <div class="cell">Row 2 Cell 1</div>
    <div class="cell">Row 2 Cell 2</div>
</div>
<div class="row footer">
    <div class="cell">Row 3 Cell 1</div>
    <div class="cell">Row 3 Cell 2</div>
</div>
  
</body>
</html>

The issue lies in the fact that the padding property does not apply to elements with display: table-row-group, table-header-group, table-footer-group, table-row, table-column-group, and table-column.

For more information, you can refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/padding

Check out an example here: http://jsbin.com/tofokoriri/edit?html,css,output

Answer 5

Answer №3

Although not a direct solution, this hint might steer you in the right direction. Consider experimenting with the outline property.

.table {
  display: table;
}
.header {
  display: table-header-group;
  font-weight: bold;
}
.row {
  display: table-row-group;
}
.cell {
  display: table-cell;
  border: 1px solid black;
  padding: 5px;
}
.selected {
  background: red;
  margin: 20px;
  border-radius: 10px;
}
.selected { outline: 2px solid blue;}
.selected .cell:first-child {border-right:1px solid red;}
.selected .cell:last-child {border-left:1px solid red;}

<div class="table">
  <div class="header">
    <div class="cell">Header 1</div>
    <div class="cell">Header 2</div>
  </div>
  <div class="row selected">
    <div class="cell">Row 1 Cell 1</div>
    <div class="cell">Row 1 Cell 2</div>
  </div>
  <div class="row">
    <div class="cell">Row 2 Cell 1</div>
    <div class="cell">Row 2 Cell 2</div>
  </div>
  <div class="row">
    <div class="cell">Row 3 Cell 1</div>
    <div class="cell">Row 3 Cell 2</div>
  </div>
</div>

Answer 6

Although not a direct solution, this hint might steer you in the right direction. Consider experimenting with the outline property.

.table {
  display: table;
}
.header {
  display: table-header-group;
  font-weight: bold;
}
.row {
  display: table-row-group;
}
.cell {
  display: table-cell;
  border: 1px solid black;
  padding: 5px;
}
.selected {
  background: red;
  margin: 20px;
  border-radius: 10px;
}
.selected { outline: 2px solid blue;}
.selected .cell:first-child {border-right:1px solid red;}
.selected .cell:last-child {border-left:1px solid red;}

<div class="table">
  <div class="header">
    <div class="cell">Header 1</div>
    <div class="cell">Header 2</div>
  </div>
  <div class="row selected">
    <div class="cell">Row 1 Cell 1</div>
    <div class="cell">Row 1 Cell 2</div>
  </div>
  <div class="row">
    <div class="cell">Row 2 Cell 1</div>
    <div class="cell">Row 2 Cell 2</div>
  </div>
  <div class="row">
    <div class="cell">Row 3 Cell 1</div>
    <div class="cell">Row 3 Cell 2</div>
  </div>
</div>

Answer 7

Answer №4

Is this something you were looking for? I included an additional div layer to achieve the desired padding effect. Hopefully, this solution meets your requirements.

$('.row').on('click', function () {    
    $('.table div').removeClass('selected');
    $(this).addClass('selected');
});

.table {
    display: table;
}
.header {
    display: table-header-group;
    font-weight: bold;
}
.row {
    display: table-row-group;
    cursor: pointer;
}

.cell {
    display: table-cell;
    border: 1px solid black;
    padding: 10px;
}
.selected .cell {
    padding: 10px;
}
.selected .cell .content{
    padding-top: 10px;
    padding-bottom: 10px;
}
.selected .cell:nth-child(1) .content{
    background-color: red;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    padding-left: 5px;
    margin-left: -5px;
    margin-right: -11px;
    
}
.selected .cell:nth-child(2) .content{
    background-color: red;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    padding-right: 5px;
    margin-right: -5px;
    padding-left: 11px;
    margin-left: -11px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
    <div class="header">
        <div class="cell">Header 1</div>
        <div class="cell">Header 2</div>
    </div>
    <div class="row">
        <div class="cell"><div class="content">Row 1 Cell 1</div></div>
        <div class="cell"><div class="content">Row 1 Cell 2</div></div>
    </div>
    <div class="row selected">
        <div class="cell"><div class="content">Row 2 Cell 1</div></div>
        <div class="cell"><div class="content">Row 2 Cell 2</div></div>
    </div>
    <div class="row">
        <div class="cell"><div class="content">Row 3 Cell 1</div></div>
        <div class="cell"><div class="content">Row 3 Cell 2</div></div>
    </div>
</div>

Answer 8

Is this something you were looking for? I included an additional div layer to achieve the desired padding effect. Hopefully, this solution meets your requirements.

$('.row').on('click', function () {    
    $('.table div').removeClass('selected');
    $(this).addClass('selected');
});

.table {
    display: table;
}
.header {
    display: table-header-group;
    font-weight: bold;
}
.row {
    display: table-row-group;
    cursor: pointer;
}

.cell {
    display: table-cell;
    border: 1px solid black;
    padding: 10px;
}
.selected .cell {
    padding: 10px;
}
.selected .cell .content{
    padding-top: 10px;
    padding-bottom: 10px;
}
.selected .cell:nth-child(1) .content{
    background-color: red;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    padding-left: 5px;
    margin-left: -5px;
    margin-right: -11px;
    
}
.selected .cell:nth-child(2) .content{
    background-color: red;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    padding-right: 5px;
    margin-right: -5px;
    padding-left: 11px;
    margin-left: -11px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
    <div class="header">
        <div class="cell">Header 1</div>
        <div class="cell">Header 2</div>
    </div>
    <div class="row">
        <div class="cell"><div class="content">Row 1 Cell 1</div></div>
        <div class="cell"><div class="content">Row 1 Cell 2</div></div>
    </div>
    <div class="row selected">
        <div class="cell"><div class="content">Row 2 Cell 1</div></div>
        <div class="cell"><div class="content">Row 2 Cell 2</div></div>
    </div>
    <div class="row">
        <div class="cell"><div class="content">Row 3 Cell 1</div></div>
        <div class="cell"><div class="content">Row 3 Cell 2</div></div>
    </div>
</div>

Answer 9

Answer №5

It appears that you are comfortable toggling the class selected with jQuery, so if you need to maintain the existing markup and use display: table, here is a potential solution:

.table {
        display: table;
        border: 1px solid black;
    }

    .header {
        display: table-header-group;
        font-weight: bold;
    }

    .row {
        display: table-row-group;
    }

    .cell {
        display: table-cell;
        padding: 5px;
        border-bottom: 1px solid black;
    }

    .cell:first-child{
        border-right: 1px solid #000;
    }

    .row:last-child > .cell {
        border-bottom: none;
        border-top: 1px solid black;
    }

    .selected {}

    .selected > div:first-child {
        background: red;
        border-radius: 10px 0 0 10px;
        border: 4px solid white;
        border-right: none;
    }

    .selected > div:last-child {
        background: red;
        border-radius: 0 10px 10px 0;
        border: 4px solid white;
        border-left: none;
    }

Answer 10

It appears that you are comfortable toggling the class selected with jQuery, so if you need to maintain the existing markup and use display: table, here is a potential solution:

.table {
        display: table;
        border: 1px solid black;
    }

    .header {
        display: table-header-group;
        font-weight: bold;
    }

    .row {
        display: table-row-group;
    }

    .cell {
        display: table-cell;
        padding: 5px;
        border-bottom: 1px solid black;
    }

    .cell:first-child{
        border-right: 1px solid #000;
    }

    .row:last-child > .cell {
        border-bottom: none;
        border-top: 1px solid black;
    }

    .selected {}

    .selected > div:first-child {
        background: red;
        border-radius: 10px 0 0 10px;
        border: 4px solid white;
        border-right: none;
    }

    .selected > div:last-child {
        background: red;
        border-radius: 0 10px 10px 0;
        border: 4px solid white;
        border-left: none;
    }

The gaps separating rows

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Transferring content files from a nuget directory to a specific destination folder

Setting column heights and spacing in Bootstrap

CSS Transform animation does not work when a class is added programmatically, although it functions properly when toggling the class in Chrome

Implementing automatic page breaks in Laravel using the mpdf libraryLet me know

The web application located on the server is having trouble recognizing and loading the stylesheet

Selecting multiple items from a grid using the Ionic framework

The problem I'm facing with the space-between property in my flexbox list

Is there a way to horizontally align the content in my footer section?

The syntax for specifying the post body content in frisby.js is important

Learn how to use the CSS transform-scale() function to scale text independently from its container while maintaining proper alignment

Tips for displaying a loading spinner each time the material table is loading

What is the best way to center CSS content such as boxes and text?

Accents marked with diacritics are not being detected + An issue occurred while

Transforming a Multi-Dimensional Array into an HTML Table

Could we incorporate a backwards typewriter animation?

Linking CSS to any page other than index.html will not be feasible

Unusual ways that backgrounds and borders behave while incorporating CSS transitions for changes in height, positions, and transformations

Rows nested within the Bootstrap grid system

Command Internet Explorer 9 to disregard media queries and instead adhere to the minimum width rule

utilizing the removeClass method to toggle the visibility of a div by removing the "hidden" class