Satırlar arasındaki boşluk

Bir tabloyu taklit etmek için belirli ekranlara ayarlanmış div'larım var. Yani temelde bir satır seçildiğinde görüntüde gösterilen stili elde etmek istiyorum. Dolgu ve kenar boşlukları denedim ama işe yaramıyor. Bunu nasıl yapabileceğimi bilen var mı?Satırlar arasındaki boşluk

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>

kaynak

2015-07-17 Anonymous

denediğin kod mu? –

"Bir satır seçildiğinde" ile ne demek istiyorsun? Bize HTML/CSS kodunuzu gösterebilir misiniz? –

Alternatif olarak 'table' yerine 'div' kullanılıyor mu? No :( – nelek

bu aradığınız şey bu mu?

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

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

Düzenleme: Burada odak Gerçekleşen CSS stil değil, işlevsellik ile ilgili. Sağ? Belki de en iyi seçenek, seçilen satırda kesinlikle konumlandırılmış bir div'dir.

kaynak

2015-07-17 16:16:58 CrazyPaste

Belki bu size yardımcı olabilir:

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

tek sorun dolgu özelliktir ekran için geçerli değildir: Tablo-row-group, masa header-grubunun, fiili altbilgi grubu, tablo satırı, tablo sütunu grubu ve tablo sütunu elemanları.

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

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

kaynak

2015-07-17 16:54:09

Güzel :) ama eksik dolgu veya kenar boşluğu ... margin özelliği 'display: table için geçerli değil -cell' elemanları ve 'padding' özelliği hücrelerin kenarları arasında boşluk oluşturmaz. :(bağlantıya bakın: http://stackoverflow.com/a/1993307/3279496 – nelek

Gerçek bir cevap ama belki de sana outline özelliğiyle biraz oynayabilir bazı ipucu verecektir. Böyle

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

kaynak

2015-07-17 17:09:24 microspino

şey? İstenilen dolgu efektini oluşturmak için div katmanı ekledim, umarım bu çözüm ihtiyaçlarınızı karşılar.

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

kaynak

2015-07-17 17:50:09 indubitablee

Sana jQuery ile sınıf selected geçiş yaparak aynı sorunu değil var, yani o biçimlendirme ve display: table ile sopa varsa, burada benim çözümdür:

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

kaynak

2015-07-17 17:56:22

Satırlar arasındaki boşluk

cevap

İlgili konular