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

The contenteditable attribute does not function properly in a foreignobject element on Firefox browsers

What is the best way to implement pushstate degradation – using backbone.history or history.js?

Having trouble interacting with an xpath-selected element in Selenium using Python?

What is the process for transforming a String into an HTML element within a Next JS Application?

Leveraging Ajax XHR2 for uploading files and accessing values in PHP

How can I align text to the center and set the text color at the same

Utilizing a media query to execute a <script> exclusively on desktop devices

JavaScript taking over the HTML footer content

How can I alter the background color while performing a transformation in JS/CSS?

Leveraging the ReactJS Hook useState for detecting Key press events

Leveraging reframe.js to enhance the functionality of HTML5 video playback

Troubleshooting problems with jqplot pie charts

Troubleshooting issue: Dropdown menu malfunctioning after using replaceWith() and appendTo()

Align audio and video elements in HTML5 using JavaScript

I am experiencing an issue where my JavaScript code does not redirect users to the next page even

Ensure that when adjusting the height of a div, the content is always pushed down without affecting the overall layout of the page

Display a loading message using jQuery Dialog when the page is loading

Fade out and slide close a div using jQuery

Issue with Internet Explorer 7 causing table to display with added height

What is the best way to address a row of hyperlink text located at the top of a webpage?