Geek Answers Handbook

Line spacing

I have divs that are configured for specific mappings to mimic a table. So basically I want to achieve the style that appears on the image when a row is selected. I tried padding and margins, but it doesn't seem to work. Does anyone know how I can do this?

enter image description here

.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>
+6
source share
5 answers

Is this what you are looking for?

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

Fiddle: http://jsfiddle.net/dzbx8dkt/

Change It is realized that you focus here on CSS styling, not functionality. Right? Perhaps the best option is a div that is absolutely positioned in the selected row.

0
source

Perhaps this may help 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 only problem is that the padding property is not applicable for display: table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.

Link: https://developer.mozilla.org/en-US/docs/Web/CSS/padding

Example: http://jsbin.com/tofokoriri/edit?html,css,output

0
source

Not a real answer, but perhaps it will give you a little hint. You can play a little with outline .

 .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>
0
source

something like that? I added another div layer to create the desired fill effect, I hope this solution meets your needs.

 $('.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>
0
source

I think you have no problem switching the selected class using jQuery, so if you need to stick with this markup and display: table , here is my 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; }
0
source

More articles:


All Articles