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

Question

我有一个用数据编译的表格，但在重叠行和样式属性方面存在定位问题。我试过调整 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>

CSS:

<style>
    td error { color: red; font-size: 100%;} 
    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;}
    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; }
 </style>

这是 CSS 在 Chrome 中的快照

发票行元素表 CSS [1]: http://i.imgur.com/cq72QUU.png

tr CSS [2]: http://i.imgur.com/jSV6XZJ.png

我是 CSS 的初学者。有人可以帮我解决这个问题吗？

Answer 1

尝试添加这个 css

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

按照您想要的方式操作它。这是 jfiddle 链接。祝你好运。 http://jsfiddle.net/JoshuaHurlburt/avttkdst/2/