1. 首頁
  2. 問答
  3. 你能爲每個單元設置不同的邊界間距嗎？

你能爲每個單元設置不同的邊界間距嗎？

2012-07-26 51 views

回答

1

假填充單元格和div內獲得其他樣式的單元格。

見here

enter image description here

注：你對細胞填充，使梯度長得難看。

來源

2012-07-26 10:12:36 daveyfaherty

2

不與標記，既border-spacing和border-collapse應用於「表」和「內聯表」元素 - 即整個表，而不是它們的一部分。

您可以通過合併單元格並使用其他結構來並排放置數據片段來僞造它，但這會丟失一些語義。

來源

2012-07-26 09:51:44 Quentin

0

您可以在表格中使用表格。不是最巧妙的解決方案，但它工作（我只把它應用到第一個單元格）

Fiddle

來源

2012-07-26 09:52:06 vimist

+0

是的，我曾想過這件事，但就像你說的那樣，它不是很整齊。 – 2012-07-26 09:54:08

0

我將圍繞額外單元添加到假填充了一下，然後惹的。檢查fiddle

來源

2012-07-26 10:02:38

0

我已經使用了一些div，併爲divs添加了一些新的樣式。以下是完整的代碼。 我只做了2行。你可以根據需要做很多行。

<html> 
<head> 

<style> 
    .dash-table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 10px; 
} 

.dash-table td, 
.dash-table th { 
    font-size: 16px; 
    padding: 10px; 
    line-height: normal; 
    text-align: center; 
    font-weight: bold; 
} 

.dash-prev { 
    border-radius: 10px 0px 0px 10px; 
    width: 25%; 
} 

.dash-curr { 
    border-radius: 0px 10px 10px 0px; 
} 

.dash-actual { 
    font-size: 14px; 
} 

.dash-blue, 
.dash-green, 
.dash-amber, 
.dash-red { 
    color: #ffffff; 
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
     border-top: 10px solid #fff; 
} 

.dash-blue { 
    background-color: #0074cc; 
    *background-color: #0055cc; 
    background-image: -ms-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); 
    background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -o-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -moz-linear-gradient(top, #0088cc, #0055cc); 
    background-image: linear-gradient(top, #0088cc, #0055cc); 
    background-repeat: repeat-x; 
    border-color: #0055cC#0055cC#003580; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0); 
    filter: progid:dximagetransform.microsoft.gradient(enabled=false); 
} 

.dash-green { 
    background-color: #5bb75b; 
    *background-color: #51a351; 
    background-image: -ms-linear-gradient(top, #62c462, #51a351); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); 
    background-image: -webkit-linear-gradient(top, #62c462, #51a351); 
    background-image: -o-linear-gradient(top, #62c462, #51a351); 
    background-image: -moz-linear-gradient(top, #62c462, #51a351); 
    background-image: linear-gradient(top, #62c462, #51a351); 
    background-repeat: repeat-x; 
    border-color: #51a351 #51a351 #387038; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0); 
    filter: progid:dximagetransform.microsoft.gradient(enabled=false); 
} 

.dash-amber { 
    background-color: #faa732; 
    *background-color: #f89406; 
    background-image: -ms-linear-gradient(top, #fbb450, #f89406); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); 
    background-image: -webkit-linear-gradient(top, #fbb450, #f89406); 
    background-image: -o-linear-gradient(top, #fbb450, #f89406); 
    background-image: -moz-linear-gradient(top, #fbb450, #f89406); 
    background-image: linear-gradient(top, #fbb450, #f89406); 
    background-repeat: repeat-x; 
    border-color: #f89406 #f89406 #ad6704; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0); 
    filter: progid:dximagetransform.microsoft.gradient(enabled=false); 
} 

.dash-red { 
    background-color: #da4f49; 
    *background-color: #bd362f; 
    background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); 
    background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); 
    background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); 
    background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); 
    background-image: linear-gradient(top, #ee5f5b, #bd362f); 
    background-repeat: repeat-x; 
    border-color: #bd362f #bd362f #802420; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0); 
    filter: progid:dximagetransform.microsoft.gradient(enabled=false); 
} 
div 
{ 
    float:left; 
    width: 50%; 
} 

.divLeft 
{ 
    padding-top: 14%; 
} 
</style> 
</head> 
<body> 
    <table class="dash-table"> 
    <thead> 
    <tr> 
     <th></th> 
     <th colspan="2">Global</th> 
     <th colspan="2">GB</th> 
     <th colspan="2">US</th> 
     <th colspan="2">RW</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td><h2>#</h2></td> 
     <td class="dash-prev dash-blue"> 
     <div class="divLeft"> 
     Previous hour<br><h2>#</h2> 
     </div> 
     <div> 
     Current hour (projected): <h2>#</h2><br> 
     <span class="dash-actual">Actual: #</span> 
     </div> 
     </td> 
     <td class="dash-prev dash-green"> 
     <div class="divLeft"> 
     Previous hour<br><h2>#</h2> 
     </div> 
     <div> 
     Current hour (projected): <h2>#</h2><br> 
     <span class="dash-actual">Actual: #</span> 
     </div> 
     </td> 
     <td class="dash-prev dash-amber"> 
     <div class="divLeft"> 
     Previous hour<br><h2>#</h2> 
     </div> 
     <div> 
     Current hour (projected): <h2>#</h2><br> 
     <span class="dash-actual">Actual: #</span> 
     </div> 
     </td> 
     <td class="dash-prev dash-red"> 
     <div class="divLeft"> 
     Previous hour<br><h2>#</h2> 
     </div> 
     <div> 
     Current hour (projected): <h2>#</h2><br> 
     <span class="dash-actual">Actual: #</span> 
     </div> 
     </td> 
    </tr> 

    <tr> 
     <td><h2>#</h2></td> 
     <td class="dash-prev dash-blue"> 
     <div class="divLeft"> 
     Previous hour<br><h2>#</h2> 
     </div> 
     <div> 
     Current hour (projected): <h2>#</h2><br> 
     <span class="dash-actual">Actual: #</span> 
     </div> 
     </td> 
     <td class="dash-prev dash-green"> 
     <div class="divLeft"> 
     Previous hour<br><h2>#</h2> 
     </div> 
     <div> 
     Current hour (projected): <h2>#</h2><br> 
     <span class="dash-actual">Actual: #</span> 
     </td> 
     <td class="dash-prev dash-amber"> 
     <div class="divLeft"> 
     Previous hour<br><h2>#</h2> 
     </div> 
     <div> 
     Current hour (projected): <h2>#</h2><br> 
     <span class="dash-actual">Actual: #</span> 
     </div> 
     </td> 
     <td class="dash-prev dash-red"> 
     <div class="divLeft"> 
     Previous hour<br><h2>#</h2> 
     </div> 
     <div> 
     Current hour (projected): <h2>#</h2><br> 
     <span class="dash-actual">Actual: #</span> 
     </div> 
     </td> 
    </tr> 

    </tbody> 
</table>? 

</body> 
</html>

檢查以下enter image description here

結果讓我知道這有什麼問題。

來源

2012-07-26 10:32:12 Narendra

相關問題

 相關問題