// 样式代码 table { border-collapse: collapse; margin: 20px; } th, td { border: 1px solid #ccc; padding: 10px; text-align: center; } tr:nth-child(odd) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; } td.status { font-weight: bold; color: #fff; } td.yes { background-color: #4caf50; } td.no { background-color: #f44336; }
查询结果以表格形式展现,表头列出了车牌号、违停时间和状态三列。状态列使用了不同的颜色来区分是否违停,绿色表示正常,红色表示违停。其中,状态列的样式加粗、变色了。
使用CSS编写表格样式,能够使得数据更清晰、美观,方便用户直观了解自己车辆的状态。