数据表 colspan 标题

Question

我有这样的桌子

<table id="tbl_orderstatus" class="dataTable table table-bordered table-hover table-full-width nowrap" width="150%" data-table="tblorderstatus">
    <thead>
        <tr>
            <th>Buyer</th>
            <th>Season</th>
            <th>Style#</th>
            <th>KP#</th>
            <th>Item Description</th>
            <th>Buyer PO</th>
            <th colspan="2">Qty</th>
            <th>Material</th>
            <th>Destination</th>
            <th>Delivery Date</th>
        </tr>
    </thead>
</table>

但我的问题是，我只是把

<th colspan="2">Qty</th>

写成错误，它说未捕获的样式未定义。我怎样才能像那样制作clospan？因为我需要在数量上放置 2 个数据列。

tq 作为答案，我打赌我必须在标题上使用两行。 tQ 伙计们:)

Answer 1

这是一个旧线程，但仍然 - 我想分享我在自己的项目中想到的内容。我需要基本上相同的东西 - 我想将标题跨越 3 列而不加强它，将其保留在一行中。

您看到该错误是因为 jQuery DataTables 希望每个字段都有一个列来分配处理程序或其他内容。我们可以通过添加另一个标题行来消除该错误，其中包含您想要跨越的多个标题列。就我而言，我添加了 3 个标题列。

现在，错误消失了，但标题看起来很可怕。看起来没有必要，但将所有其他顶行标题列设置为跨越 2 行 (rowspan)。 现在，“魔法” - 因为我们的第二行标题列不包含任何信息，只需隐藏它们即可！

$(document).ready(function() {
    $('#example').DataTable();
});

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="display" cellspacing="0" width="100%" style="text-align: center;">
    <thead>
        <tr>
            <th rowspan="2">One</th>
            <th colspan="2">Two and Three</th>
            <th rowspan="2">Four</th>
            <th rowspan="2">Five</th>
        </tr>
        <tr style="display:none">
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> First data </td>
            <td> Second data </td>
            <td> Third data </td>
            <td> Fourth data </td>
            <td> Fifth data </td>
        </tr>
    </tbody>
</table>

瞧。这是我能想到的最干净的解决方法，但它可以。

Answer 2

您需要为每一行添加一个标题，因此您的标题应该是这样的：

               <thead>
                    <tr>
                        <th rowspan="2">Buyer</th>
                        <th rowspan="2">Season</th>
                        <th rowspan="2">Style#</th>
                        <th rowspan="2">KP#</th>
                        <th rowspan="2">Item Description</th>
                        <th rowspan="2">Buyer PO</th>
                        <th colspan="2">Qty</th>
                        <th rowspan="2">Material</th>
                        <th rowspan="2">Destination</th>
                        <th rowspan="2">Delivery Date</th>
                    </tr>
                    <tr>
                        <th>Qty 1</th>
                        <th>Qty 2</th>
                    </tr>
                </thead>

            </table>

Answer 3

我测试了，正在运行。也许您忘记添加一个

<td></td>

。

<table id="tbl_orderstatus" class="dataTable table table-bordered table-hover table-full-width nowrap" width="150%" data-table="tblorderstatus">
    <thead>
        <tr>
            <th>Buyer</th>
            <th>Season</th>
            <th>Style#</th>
            <th>KP#</th>
            <th>Item Description</th>
            <th>Buyer PO</th>
            <th colspan="2">Qty</th>
            <th>Material</th>
            <th>Destination</th>
            <th>Delivery Date</th>
        </tr>
    </thead>
    <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test 1</td>
        <td>Test 2</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
    </tr>
</table>