如何将 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 ilnk http://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                                   |
----------------------------------------------------------------------------------

我尝试使用to调整td值，但没有得到我想要的结果。有人可以帮我弄这个吗？class='error'tr

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>

看看这个更新的小提琴