如何使用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應用表格單元格格式

回答

相關問題