如何避免HTML表中的tr值重叠

我有一个用数据编译的表，在定位重叠行和样式属性时遇到问题。我尝试过调整CSS，但没有任何效果

下面是我的HTML表格

<table class="ui-widget" id="lines">
    <tbody>
    <tr>
        <th>Line Item Number</th>
        <th>Line Item Date</th>
        <th>Unit Cost</th>
        <th>Number of Units</th>
        <th>Line Item Total</th>
        <th>Task Code</th>
        <th>Expense Code</th>
        <th>Timekeeper ID</th>
        <th>Line Item Description</th>
    </tr>
    <tr class="errortrue">
        <td>1</td>
        <td>20150301</td>
        <td>1</td>
        <td>1</td>
        <td>4</td>
        <td></td>
        <td>E1</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
    <td colspan="9" class="error">           
          Line : 1 NULL Value is not in the defined list  for LINE ITEM TAX TYPE<br/>
          Line : 1 MATTER NAME is a required field<br/>
          Line : 1 BILLING END DATE is a required field<br/>
          Line : 1 INVOICE DATE is a required field<br/>
          Line : 1 BILLING START DATE is a required field<br/>
    </td>
    </tr>
    <tr class="errortrue">
        <td>2</td>
        <td>20150304</td>
        <td>2</td>
        <td>2</td>
        <td>6</td>
        <td></td>
        <td>E2</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="9" class="error">               
              Line : 2 NULL Value is not in the defined list  for LINE ITEM TAX TYPE<br/>
        </td>
    </tr>
    <tr class="errortrue">
        <td>3</td>
        <td>20150306</td>
        <td>3</td>
        <td>3</td>
        <td>12</td>
        <td>T3</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="9" class="error">
              Line : 3 NULL Value is not in the defined list  for LINE ITEM TAX TYPE<br/>
        </td>
    </tr>
    </tbody>
</table>

行式项目号码
行项目日期
单位成本
单位数量
行项目总计
任务代码
费用代码
计时器ID
行项目说明
1.
20150301
1.
1.
4.
E1
行：1空值不在行项目税类型的定义列表中

行：1物质名称是必填字段

行：1帐单结束日期是必填字段

行：1发票日期是必填字段

行：1帐单开始日期是必填字段

2.
20150304
2.
2.
6.
E2
行：2空值不在行项目税类型的定义列表中

3.
20150306
3.
3.
12
T3
行：3空值不在行项目税类型的定义列表中

CSS:

td错误{颜色：红色；字体大小：100%；}
tr.errortrue{color:#c33；字体大小：100%；字体大小：粗体；}
table.line th{背景色：灰色；颜色：白色；填充：5px；}
表{空单元格：显示；边框折叠：折叠；}
table.lines td{text align:center；}
table.header{float:left；}
table.header th{文本对齐：左；}
table.header td{text align:right；}
table.header td.right{text align:left；}
table.header tfoot th{文本对齐：左；背景：#ebebebeb}
table.header tfoot td{text align:右；background:#ebebebeb}
td.right，th.right{text align:right；}

以下是Chrome中CSS的快照

发票行项目表CSS [1] :

tr css [2] :

我是CSS的初学者。有人能帮我吗？

尝试添加此css

th {
    padding:10px;
    margin:10px;
}
td {
    padding:10px;
    margin:10px;
}

按你想要的方式操作它。这是jfiddle链接。祝你好运

看看这个，我注意到你正在给css中的id行分配一个类，当它应该是和id时。例如你有

table.lines th

，它应该是

table#lines th

，除非你在html

中更改为

CSS:

---

我对这把小提琴做了一些改动，这可能就是你要找的。让我知道。

我猜error类在它上面有一些定位，在表行上有display:table row是没有意义的

th {
    padding:10px;
    margin:10px;
}
td {
    padding:10px;
    margin:10px;
}

table#lines td.error {
color: red;
font-size: 100%;
text-align:left;
padding-left:15px;
}
th {
margin:5px;
padding:5px;
}
td {
padding:10px;
margin:10px;
}
tr.errortrue {
color: #c33;
font-size: 100%;
font-weight: bold;
}
table#lines th {
background-color : grey;
color: white;
padding: 5px;
}
table {
empty-cells: show;
border-collapse: collapse;
}
table#lines td {
text-align: center;
}
.align-left {
text-align:left;
}
table.header {
float: left;
}
table.header th {
text-align: left;
}
table.header td {
text-align: right;
}
table.header td.right {
text-align: left;
}
table.header tfoot th {
text-align: left;
background: #ebebeb
}
table.header tfoot td {
text-align: right;
background: #ebebeb
}
td.right, th.right {
text-align: right;
}