如何把HTML表格TD值在一个新的生产线，在同一行

Question

我有一个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> 
    </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> 

这里是的jsfiddle ilnkhttp://jsfiddle.net/x681ef9r/

我试图把所有td值（带class='error'）在新的生产线，在同一行

|--------------------------------------------------------------------------------| 
| 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         | 
---------------------------------------------------------------------------------- 

我试着调整td VA与class='error' 但我没有得到我的意图。有人可以帮我弄这个吗？

Answer 1

你需要将它们放在自己的行，让他们跨越表，就像这样：

<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> 

见this updated fiddle

Answer 2

http://jsfiddle.net/x681ef9r/4/

正如其他人回答，你需要单独行和colspan属性。 这个小提琴保持每个单元一个错误信息的格式。

<tr> 
     <td colspan="5" class="error"> 
      Line : 1 NULL Value is not in the defined list for LINE ITEM TAX TYPE 
     </td> 
    </tr> 

仅供参考，如果你不需要他们排队下，您可以使用CSS：

.error { 
    display: inline-block; 
}