Question

使用Ckeditor有两个可能的html表没有标题，第二个是标题。现在我想只设置一个表格的顶行，我不在乎它是否是一行或一行。以下是两种情况的代码。

没有标题：

<table class="smart-table">
    <colgroup cols="2">
        <col colnum="1" colname="1" width="486.00px">
        <col colnum="2" colname="2" width="486.00px">
    </colgroup>
    <tbody>
        <tr class="smart-table-row">
            <td class="smart-table-cell"><div data-qxe-element="p" class="p">
                    <br>
                </div></td>
            <td class="smart-table-cell"><div data-qxe-element="p" class="p">
                    <br>
                </div></td>
        </tr>
        <tr class="smart-table-row">
            <td class="smart-table-cell"><div data-qxe-element="p" class="p">
                    <br>
                </div></td>
            <td class="smart-table-cell"><div data-qxe-element="p" class="p">
                    <br>
                </div></td>
        </tr>
    </tbody>
</table>

使用标题：

<table class="smart-table">
    <colgroup cols="2">
        <col colnum="1" colname="1" width="486.00px">
        <col colnum="2" colname="2" width="486.00px">
    </colgroup>
    <thead>
        <tr class="smart-table-row">
            <th class="smart-table-cell"><div data-qxe-element="p" class="p">
                    <br>
                </div></th>
            <th class="smart-table-cell"><div data-qxe-element="p" class="p">
                    <br>
                </div></th>
        </tr>
    </thead>
    <tbody>
        <tr class="smart-table-row">
            <td class="smart-table-cell"><div data-qxe-element="p" class="p">
                    <br>
                </div></td>
            <td class="smart-table-cell"><div data-qxe-element="p" class="p">
                    <br>
                </div></td>
        </tr>
    </tbody>
</table>

我在下面使用的CSS：

.table  thead tr:first-child th {
    background-color: #004b92;
    color:White;  
}

.table  tbody tr:first-child td {
    background-color: #004b92;
    color:White;  
}

Answer 1

为此你必须使用一点jQuery。首先找到CKEditor生成的所有表，并通过下面的脚本对它们应用css类。

$(function() {
    fnApplyHeaderClass();
});

var fnApplyHeaderClass = function() {

    $("table.smart-table").each(function() {

        if ($(this).find("thead").length > 0) {

            $(this).find("thead").find("tr").eq(0).addClass("ck-editor-header");
        } else {
            $(this).find("tbody").find("tr").eq(0).addClass("ck-editor-header");
        }
    });

};

并在CSS中使用此

.ck-editor-header{    
  background-color: #004b92;
  color:White;  
}

使用JSFiddle https://jsfiddle.net/00qbtsf7/

如何根据表格html设置表头的样式？

1 个答案: