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

Question

我对表格中单元格的CSS格式有一些困难。 该单元格需要具有与表中其他单元格不同的背景色，列跨度和对齐方式。 内联样式可以很好地工作，但是我想将样式移到CSS。

这是我的CSS中的内容：

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

由于某些原因，CSS不会应用column-span和align-text属性，而background-color则应用。

这种内联样式可以正常工作：

<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，~~~特蕾西

Answer 1

这对我来说效果很好，希望它能解决您的问题。

对于像元间距使用：

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

对于单元格填充，请使用：

td{padding: 6px;}

Answer 2

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

保留colspan属性并摆脱align属性。 将您的CSS更改为我上面的内容。 colspan是为html td制作的属性。

Answer 3

您正在滥用CSS属性！

colspan没有等效的css。 它是TD表的HTML属性 ，而column-span使元素跨列，并且仅与使用column-count其他元素一起使用

https://developer.mozilla.org/zh-CN/docs/Web/CSS/column-span

Answer 4

尝试一下，它对我来说效果很好，希望它对您也有用。

<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;
}

有关更多信息，您可以阅读下面的详细示例。