Как избежать перекрытия значений tr в таблице HTML

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

Invoice Line Items Таблица CSS [1]: http://i.imgur.com/cq72QUU.png

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

Я новичок в CSS. Может кто-нибудь, пожалуйста, помогите мне с этим?

Answer 1

Посмотрите на это Fiddle Я заметил, что вы назначаете класс для строк id в вашем css, когда это должно быть, и id. Пример у вас есть table.lines th, которые должны быть действительно table#lines th, если не изменить в HTML <table class="ui-widget" id="lines"> в <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; 
} 

Я применил некоторые изменения в эту скрипку, которые могут быть то, что вы ищете. Дай мне знать.

Answer 2

Попробуйте добавить этот CSS

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

манипулируют это так, как вы хотите. вот ссылка jfiddle. Удачи. http://jsfiddle.net/JoshuaHurlburt/avttkdst/2/