我有一张看起来像这样的桌子
我想删除每组“上一个”和“当前”单元格之间的间距，但在行和其他列之间保留它。这可能吗？
问问题
216 次
5 回答
2
没有那个标记，border-spacing和border-collapse都适用于'table' 和'inline-table' 元素——即整个表，而不是它们的一部分。
您可以通过合并单元格并使用其他结构将数据块并排放置来伪造它，但这会失去一些语义。
于 2012-07-26T09:51:44.487 回答
1
于 2012-07-26T10:12:36.073 回答
0
您可以在表格中使用表格。不是最整洁的解决方案，但它有效（我只将它应用于第一个单元格）
于 2012-07-26T09:52:06.427 回答
0
我会添加额外的单元格来稍微伪造填充，然后把它们弄乱。检查小提琴
于 2012-07-26T10:02:38.660 回答
0
我使用了一些 div 并为 div 添加了一些新样式。下面是完整的代码。我只做了 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>
检查下面的结果
让我知道这是否有任何问题。
于 2012-07-26T10:32:12.277 回答