CSS

Tablo satırları arasındaki boşluklar arasındaki boşluklar Her tablo satırının yuvarlak bir kenarlığı olduğu bir tablo görüntülemeye çalışıyorum. Bu sınırlar arasında boşluklar eklemek istiyorum ve satırın içinde değil. Başlangıçta, her satır arasında boşluk bırakmak için ek bir satır <tr class='spacer'> vardı, ancak bir jQuery eklentisi, Tablesorter kullanarak tabloma sıralayıcı işlevi ekledik.CSS

Tablolarımı sıralamaya çalıştığımda, bu aralıklar her satırın arasındaki boşluğu kaldırarak aşağı veya yukarı doğru sıralanır.

Aradığım şey, bu satırların her biri arasında boşluk bırakmanın bir yoludur ve yine de tablonun sıralanabilir olmasına izin verir.

// HTML Şöyledir //

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="table.css"/> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.tablesorter.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("table").tablesorter(); 
}); 
</script> 

</head> 

<body> 

<table class="tablesorter" cellspacing=0> 
<thead> 
    <tr> 
    <th>Name</th> 
    <th>Date</th> 
    <th>Price</th> 
</tr> 
</thead> 

<tbody> 
<tr> 
    <td class='roundleft'>Keanan</td> 
    <td class='spacer'>01/11/11 6:52 AM</td> 
    <td class='roundright'>$20.95</td> 
</tr> 

<tr> 
    <td class='roundleft'>Conor</td> 
    <td class='spacer'>01/11/11 4:52 PM</td> 
    <td class='roundright'>$200.00</td> 
</tr> 

<tr> 
    <td class='roundleft'>Ryan</td> 
    <td class='spacer'>01/11/11 12:52 PM</td> 
    <td class='roundright'>$1.00</td> 
</tr> 

</tbody>  
</table> 

</body> 
</html>

// CSS aşağıdaki // biz Hücre Geciktirme ve Hücre Aralığı nasıl elde edebileceğini söyler StackOverflow'daki çok iyi bir soru var

body { 
    text-align:center 
    margin:50px 0px; 
    padding:0px; 
    font-family: "Open Sans"; 
} 

#content { 
    font-weight:normal; 
    background: #009900; 
    width:700px; 
    margin:0px auto; 
    color:white; 
    border:2px solid #000000; 
    border-radius: 15px; 
} 

table{ 
    margin-left: auto; 
    margin-right:auto; 
    font-size: 12pt; 
    color: black; 
    border: 3px black solid; 
    border-radius: 15px; 
    padding-right: 10px; 
    padding-left: 10px; 
    background-color: #009900; 
} 

th{ 
    text-align: center; 
    color: white; 
    padding-right: 15px; 
    padding-left:10px; 
    padding-bottom: 5px; 
    font-size: 16pt; 
    font-weight: normal; 
    background-color: #009900; 
} 

tr{ 
    border-collapse: collapse; 
    height: 80px; 
    background-color: #FFFFFF; 
} 


td { 
    padding-left:0px; 
    padding-right: 0px; 
    padding-bottom: 5px; 
    text-align: center; 
    border-top: solid 1px black; 
    border-bottom: solid 2px black; 
    border-image: url(./borders/bottom.jpg); 
} 

td.spacer{ 
    padding-right: 20px; 
} 

td.roundleft{ 
    border-left: 1px solid; 
    border-top-left-radius: 15px; 
    border-bottom-left-radius: 15px; 
    -moz-border-radius-topleft:15px; /* Firefox top left corner */ 
    -moz-border-radius-bottomleft:15px; /* Firefox bottom left corner */ 
} 

td.roundright{ 
    -moz-border-radius-topright:15px; /* Firefox top right corner */ 
    -moz-border-radius-bottomright:15px; /* Firefox bottom right corner */ 
    border-top-right-radius: 15px; 
    border-bottom-right-radius: 15px; 
    border-right: 2px solid; 
}

kaynak

2011-11-19 Keanan Koppenhaver

enter image description here ancak sizin için div ekleyerek arzu sonucu alabilirsiniz, iki sıra arasındaki marj eklemek için bir yol yoktur sizin ve burada

bulmak için

Ben css ve html yapmış

HTML Kodu: http://snipt.org/kyR3

CSS Kodu: iki satır arasında daha fazla yer vermek td için http://snipt.org/kyP4

Değişim yukarıdan alt dolgu. İşte

....

kaynak

2011-11-19 07:21:17

CSS mükemmel çalışıyor, ancak sadece td içinde bir div'e ihtiyacınız var. '

Keanan

code'' Sizin bağlantılar yanıt vermiyor –

code'. – Glenn

@Code Lover: Kodunuzu doğrudan cevabınıza koyarsanız, bağlantılarınız kesilir. – Roman

CSS

kullanarak

o çözer Set cellpadding and cellspacing in CSS?

Umut görün lütfen senin Sorun

bilgim gereğince

kaynak

2011-11-19 04:34:49 Moons

onlar da artık her beyaz masa hücre arasındaki yeşil arka plan görüntüler 's arasındaki boşluk olması haricinde, orada çalışan açıklamak yöntem sonucudur. Hücreler arasında boşluk bırakmadan satırlar arasında boşluk eklemek istiyorum. –

cevap

İlgili konular