如何将 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                                   |
----------------------------------------------------------------------------------

我尝试用class='error'调整td值以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>

查看此更新的小提琴

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