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

我尝试用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>

请参阅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; }

如何将HTML表td值放在同一行的新行中

2 个答案: