Abstand zwischen Zeilen

Ich habe Divs, die auf bestimmte Anzeigen eingestellt sind, um eine Tabelle nachzuahmen. Im Grunde möchte ich den Stil erreichen, der im Bild angezeigt wird, wenn eine Zeile ausgewählt ist. Ich habe Padding und Ränder versucht, aber es scheint nicht zu funktionieren. Hat jemand eine Idee, wie ich das machen kann?Abstand zwischen Zeilen

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>

Quelle

2015-07-17 Anonymous

Wo ist der Code, den du ausprobiert hast? –

Was meinen Sie mit "wenn eine Zeile ausgewählt ist"? Können Sie uns Ihren HTML/CSS-Code zeigen? –

Alternativ mit 'table' statt' div'? Nein :( – nelek

Ist das, was Sie suchen?

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

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

Edit: Realisieren Sie hier konzentrieren sich auf das CSS-Styling, nicht die Funktionalität. Recht? Vielleicht ist die beste Option ein div absolut in der ausgewählten Zeile positioniert.

Quelle

2015-07-17 16:16:58 CrazyPaste

Vielleicht können diese Ihnen helfen:

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

Das einzige Problem ist die Eigenschaft padding sind nicht anwendbar auf display: table-row-group, table-header-Gruppe, Tabellen- Elemente der Fußzeilengruppe, der Tabellenzeile, der Tabellenspaltengruppe und der Tabellenspalte.

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

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

Quelle

2015-07-17 16:54:09

Nizza :) aber fehlende Polsterung oder Marge ... Margin-Eigenschaft ist nicht anwendbar auf 'Anzeige: Tabelle -cell" elements und 'padding' -Eigenschaft erstellt keinen Abstand zwischen Kanten der Zellen. :(Verweislink: http://stackoverflow.com/a/1993307/3279496 – nelek

Keine wirkliche Antwort, aber vielleicht wird es Ihnen einen Hinweis geben Sie ein wenig mit der outline Eigenschaft spielen können.

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

Quelle

2015-07-17 17:09:24 microspino

so etwas? Ich fügte eine andere div Schicht hinzu, um den Polsterungseffekt zu schaffen, der gewünscht wurde, ich hoffe, dass diese Lösung Ihren Bedürfnissen entspricht.

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

Quelle

2015-07-17 17:50:09 indubitablee

Ich glaube, Sie haben nicht Problem mit Klasse Makeln selected mit jQuery, also, wenn Sie mit diesem Markup und display: table zu haften haben, hier ist meine Lösung:

.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; 
    }

Quelle

2015-07-17 17:56:22

Abstand zwischen Zeilen

Antwort

Verwandte Themen