CSS中怎么让为null的日期显示空白，数值栏位显示2位小数

Question

1.在table、th、td中如何让后端传入的日期null在前台显示为空白
2.如何让数值栏保留两位小数
CSS样式如下：

N'<style>
table { width:100%;}
table, th, td {
border: 1px solid black;border-collapse: collapse;}
th, td {padding: 5px;text-align: left;}
th { background-color:#4682B4;
     font-size:12.0pt;font-weight:bold;
     font-family:Arial ,sans-serif;
     color :#ffffff;}
tr { font-size:8.0pt;font-family:Arial,sans-serif;}
span {}'+
N'</style><H1 style="text-align:center">表格内容</H1>'+
N'<table align="center">'+
N'<tr><th width=10%>采购单号</th>'+
      N'<th width=10%>作业日期</th>'+
      N'<th width=10%>预定交期</th>'+
      N'<th width=8%>回复交期</th>'+  
      N'<th width=4%>厂商编号</th>'+
      N'<th width=16%>厂商名称</th>'+
      N'<th width=10%>料品编号</th>'+
      N'<th width=10%>料品名称</th>'+
      N'<th width=10%>料品规格</th>'+
      N'<span><th width=2%>数量</th></span>'+
      N'<th width=4%>单位</th>'+
      N'<th width=6%>备注</th>'+
N'</tr>'

页面显示效果如下

Answer 1

【以下回答由 GPT 生成】

问题分为两部分: 1. 如何让表格中后端传递的日期null为空白？ 你可以通过CSS的伪类选择器:empty来选择空元素并设置样式来实现。具体步骤如下: - 在CSS样式中找到对应的日期单元格的选择器，例如td.date类选择器。 - 使用伪类选择器:empty选择空元素。 - 设置空元素的样式为白色或者透明来隐藏日期。 示例代码:

td.date:empty {
  color: white;
  /* 或者使用透明度 */
  /* opacity: 0; */
}

1. 如何设置数值栏为两位小数？ 你可以使用CSS的toFixed()方法将数值格式化为指定位数的小数。具体步骤如下:
2. 在CSS样式中找到对应的数值单元格的选择器，例如td.number类选择器。
3. 创建一个content属性，在其中使用toFixed(2)方法来格式化数值。 示例代码:

td.number::after {
  content: attr(data-number);
  content: parseFloat(attr(data-number)).toFixed(2);
}

请注意，以上代码中的选择器和属性名是示例，你需要根据你的HTML结构和样式进行相应的调整。

如果你无法提供HTML代码的话，以上答案依然有效，你只需要将选择器替换为你的具体选择器即可。

【相关推荐】

• 这篇博客: CSS创建两栏布局（左侧宽度固定，右侧宽度自适应）的几种方式中的 方式5：使用table 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^