How to avoid overlapping tr values in HTML table - html

Question

I have a table compiled with data and am having positioning problems with overlapping rows and styling properties. I have tried tweaking the CSS but nothing really worked.
below is my HTML table
<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>
Here are the snapshots of CSS in Chrome
Invoice Line Items Table CSS
[1]: http://i.imgur.com/cq72QUU.png
tr css
[2]: http://i.imgur.com/jSV6XZJ.png
I am a beginner at CSS. Can someone please help me with this?

Answer 1

Try adding this css
th {
padding:10px;
margin:10px;
}
td {
padding:10px;
margin:10px;
}
Manipulate it the way you want. here is the jfiddle link. Good luck. http://jsfiddle.net/JoshuaHurlburt/avttkdst/2/

Answer 2

Have a look at this Fiddle I noticed you are assigning a class to the id lines in your css when it should be and id. Example you have table.lines th which should really be table#lines th unless you change in your html <table class="ui-widget" id="lines"> to <table class="ui-widget" class="lines">
CSS:
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;
}
I applied some changes to this fiddle which may be what you are looking for. Let me know.