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

Question

我在表中单元格的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，~~~Tracy

Answer 1

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

保留colspan属性并去掉align属性。把你的css改成我上面的样子。colspan是为html td创建的属性。

Answer 2

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

用于单元格间距：

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

用于单元格填充：

td{padding: 6px;}

Answer 3

您正在滥用CSS属性

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

https://developer.mozilla.org/en-US/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;
}

要了解更多信息，您可以浏览这个详细的示例。