如何使用CSS应用表格单元格格式

我在表格中对单元格的CSS格式有些困难。该单元格需要具有与表格中其他单元格不同的背景色，列宽和对齐方式。内联样式工作正常，但我想将样式移动到CSS。如何使用CSS应用表格单元格格式

下面是我在我的CSS：

/*Color and formatting the background on cal_parameter*/ 
.calParameter 
{ 
background-color:darkgray; 
column-span:all; 
align-content:center; 
}

出于某种原因，列跨度和对齐文本属性不受CSS应用，但背景颜色。

这行的造型作品的权利：

<td class="calParameter" colspan="8" align="center">@Html.DisplayFor(modelitem => data.cal_points.cal_parameter)</td>

这个CSS样式不工作的权利：

<td class="calParameter">@Html.DisplayFor(modelitem => data.cal_points.cal_parameter)</td>

TIA， ~~~特雷西

来源

2015-10-03 TLamb

在您的开发控制台中，您是否可以看到其他值被其他css覆盖的其他值？ – csmckelvey

我看不到。 – TLamb

.calParameter { 
background-color:darkgray; 
text-align:center; 
}

保持跨度属性，并摆脱了align属性的。改变你的CSS到我上面的东西。 colspan是html td的一个属性。

来源

2015-10-03 15:47:36 kro91

谢谢！将“align-content”替换为“text-align”作品。我不太明白你的意思是关于colspan是HTML td的一个属性。我只将这种风格应用于html table td's。 Perhap的我需要改变CSS来指定表而不是仅仅泛型类？ – TLamb

这非常适用于我希望它能解决你的问题。

对于细胞间距使用：

table {border-spacing: 8px 2px;}

对于细胞填充使用：

td{padding: 6px;}

来源

2015-10-03 15:44:47 CreativePS

感谢您花时间回复！你的回应并不告诉我为什么我的样式表中的“列跨度”不工作....而“colspan”在线。 – TLamb

在使用表格的CSS中存在一些限制，CSS确实很好。表格不在其中。这可能不是流行的答案，但我相信它是诚实的。你可以通过使用div来实现类似的事情，通过使用div来使它们充当通过css的表格。我在我的下一个答案中单独发布了一个示例。 – CreativePS

再次感谢！我没有意识到“CSS表格”和“HTML表格”之间存在差异 - 我是一个万能的交易，无所适从！由于我只在一个页面上呈现这些特定的数据，因此我将其作为内嵌代码保留。 – TLamb

您正在滥用CSS属性！

colspan没有相当于css的CSS。这是TD表HTML属性，而column-span使得跨列的元素跨度，并使用column-count

https://developer.mozilla.org/en-US/docs/Web/CSS/column-span

来源

2015-10-03 16:43:10 Enzo

感谢您的反馈。有没有办法使用CSS完成这个“列跨度”？我尝试添加列数到我的CSS后面的列跨度，但stil没有运气 – TLamb

尝试了这一点只能与其他元素的作品，它的工作很适合我，希望这将是有益的你也是。

<div class="tablewrapper"> 
    <div class="table"> 
    <div class="row"> 
     <div class="cell"> 
     Top left 
     </div> 
     <div class="rowspanned cell"> 
     Center 
     </div> 
     <div class="cell"> 
     Top right 
     </div> 
    </div> 
    <div class="row"> 
     <div class="cell"> 
     Bottom left 
     </div> 
     <div class="empty cell"></div> 
     <div class="cell"> 
     Bottom right 
     </div> 
    </div> 
    </div> 
</div> 

.tablewrapper { 
    position: relative; 
} 
.table { 
    display: table; 
} 
.row { 
    display: table-row; 
} 
.cell { 
    border: 1px solid red; 
    display: table-cell; 
} 
.cell.empty 
{ 
    border: none; 
    width: 100px; 
} 
.cell.rowspanned { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100px; 
}

欲了解更多信息，你可以通过这个详细的例子。

来源

2015-10-03 18:56:17 CreativePS

如何使用CSS应用表格单元格格式

回答

相关问题