I have a html as below
<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>
</tr>
<tr class="errortrue">
<td>1</td>
<td>20150301</td>
<td>1</td>
<td>1</td>
<td>4</td>
<td class="error">Line : 1 NULL Value is not in the defined list for LINE ITEM TAX TYPE</td>
<td class="error">Line : 1 INVOICE DATE is a required field</td>
<td class="error">Line : 1 BILLING START DATE is a required field</td>
</tr>
<tr class="">
<td>2</td>
<td>20150304</td>
<td>2</td>
<td>2</td>
<td>6</td>
</tr>
<tr class="errortrue">
<td>3</td>
<td>20150306</td>
<td>3</td>
<td>3</td>
<td>12</td>
<td class="error">Line : 3 NULL Value is not in the defined list for LINE ITEM TAX TYPE</td>
<td class="error">Line : 3 MATTER NAME is a required field</td>
<td class="error">Line : 3 BILLING END DATE is a required field</td>
</tr>
</tbody>
</table>
Here is the jsfiddle ilnk /
I am trying to put all td values(with class='error') in new line with in same row
|--------------------------------------------------------------------------------|
| Line# | Date | UnitCost | NumberofUnits | Total |
|--------------------------------------------------------------------------------|
|1 20150301 1 1 4 |
|Line : 1 NULL Value is not in the defined list for LINE ITEM TAX TYPE |
|Line : 1 INVOICE DATE is a required field |
|Line : 1 BILLING START DATE is a required field |
|--------------------------------------------------------------------------------|
|2 20150304 2 2 6 |
|--------------------------------------------------------------------------------|
|2 20150306 3 3 12 |
|Line : 3 NULL Value is not in the defined list for LINE ITEM TAX TYPE |
|Line : 3 MATTER NAME is a required field |
|Line : 3 BILLING END DATE is a required field |
----------------------------------------------------------------------------------
I tried tweaking td values with class='error' to tr but I didnt get what I intended. Can someone help me with this?
I have a html as below
<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>
</tr>
<tr class="errortrue">
<td>1</td>
<td>20150301</td>
<td>1</td>
<td>1</td>
<td>4</td>
<td class="error">Line : 1 NULL Value is not in the defined list for LINE ITEM TAX TYPE</td>
<td class="error">Line : 1 INVOICE DATE is a required field</td>
<td class="error">Line : 1 BILLING START DATE is a required field</td>
</tr>
<tr class="">
<td>2</td>
<td>20150304</td>
<td>2</td>
<td>2</td>
<td>6</td>
</tr>
<tr class="errortrue">
<td>3</td>
<td>20150306</td>
<td>3</td>
<td>3</td>
<td>12</td>
<td class="error">Line : 3 NULL Value is not in the defined list for LINE ITEM TAX TYPE</td>
<td class="error">Line : 3 MATTER NAME is a required field</td>
<td class="error">Line : 3 BILLING END DATE is a required field</td>
</tr>
</tbody>
</table>
Here is the jsfiddle ilnk http://jsfiddle/x681ef9r/
I am trying to put all td values(with class='error') in new line with in same row
|--------------------------------------------------------------------------------|
| Line# | Date | UnitCost | NumberofUnits | Total |
|--------------------------------------------------------------------------------|
|1 20150301 1 1 4 |
|Line : 1 NULL Value is not in the defined list for LINE ITEM TAX TYPE |
|Line : 1 INVOICE DATE is a required field |
|Line : 1 BILLING START DATE is a required field |
|--------------------------------------------------------------------------------|
|2 20150304 2 2 6 |
|--------------------------------------------------------------------------------|
|2 20150306 3 3 12 |
|Line : 3 NULL Value is not in the defined list for LINE ITEM TAX TYPE |
|Line : 3 MATTER NAME is a required field |
|Line : 3 BILLING END DATE is a required field |
----------------------------------------------------------------------------------
I tried tweaking td values with class='error' to tr but I didnt get what I intended. Can someone help me with this?
2 Answers
Reset to default 4You'll need to put them in their own rows to have them span the table, like so:
<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>
</tr>
<tr class="errortrue">
<td>1</td>
<td>20150301</td>
<td>1</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td colspan="5" class="error">
Line : 1 NULL Value is not in the defined list for LINE ITEM TAX TYPE
<br/>Line : 1 INVOICE DATE is a required field
<br/>Line : 1 BILLING START DATE is a required field
</td>
</tr>
<tr class="">
<td>2</td>
<td>20150304</td>
<td>2</td>
<td>2</td>
<td>6</td>
</tr>
<tr class="errortrue">
<td>3</td>
<td>20150306</td>
<td>3</td>
<td>3</td>
<td>12</td>
</tr>
<tr>
<td colspan="5" class="error">
Line : 1 NULL Value is not in the defined list for LINE ITEM TAX TYPE
<br/>Line : 1 INVOICE DATE is a required field
<br/>Line : 1 BILLING START DATE is a required field
</td>
</tr>
</tbody>
</table>
See this updated fiddle
http://jsfiddle/x681ef9r/4/
As others answered, you need separate rows and the colspan attribute.
This fiddle maintains the same format of one error message per cell.
<tr>
<td colspan="5" class="error">
Line : 1 NULL Value is not in the defined list for LINE ITEM TAX TYPE
</td>
</tr>
Just for reference, if you don't need them to line up underneath, you can use the CSS:
.error {
display: inline-block;
}