TinyMCE 表格边框线间距问题答案

【问题标题】：TinyMCE Table border Line Spacing IssueTinyMCE 表格边框线间距问题
【发布时间】：2014-06-16 20:33:59
【问题描述】：

您好，我在 tinymce 编辑器的帮助下创建了一个表格并为其应用了边框。但是我在预览中看到表格的边界被虚线打破。你能帮我解决这个问题吗

css
    .BorderTop{
        border-top: 1pt solid #000000 !important;
    }

    .BorderBottom {
        border-bottom: 1pt solid #000000 !important;
    }

    .BorderRight {
        border-right: 2px solid #000000 !important;
    }

    .BorderLeft{
        border-left: 2px solid #000000 !important;
    }
//controller for the table section
    $scope.tinymceOptions = {
                /*jshint camelcase: false */
                content_css: "/assets/css/apaStyle.css?r=" + Math.random(),
                skin_url: '/assets/css/skin/asc',
                mode: "exact",
                plugins: ["spellchecker visualchars paste charmap contextmenu preview textcolor eqneditor searchreplace fullscreen"],
                elements: "tabletextarea",
                entity_encoding: "numeric",
                toolbar: "undo redo | table | fontFamily fontSize | styleselect | bold italic underline strikethrough | subscript superscript | forecolor backcolor | removeformat | alignleft aligncenter alignright alignjustify | charmap preview | lineSpaceBtn | eqneditor | searchreplace  | spellchecker | fullscreen | apaBorderBtn | headingStyleBtn",
                toolbar_items_size: 'small',
                remove_linebreaks : true,
                force_p_newlines : false,
                force_br_newlines : true,
                forced_root_block : '',
                menubar: false,
                height : '380',
                external_plugins: {
                    "apatable": "/assets/libs/tinymce/plugins/apatable/plugin.js",
                    "apaTableTool" : "/assets/libs/tinymce/plugins/apaTableTools/plugin.js",
                    "eqneditor":"/assets/libs/tinymce/plugins/eqneditor/plugin.min.js",
                    "apaFont": "/assets/libs/tinymce/plugins/apaFont/plugin.js"
                }    
            };

【问题讨论】：

在帖子中显示您的代码...
你需要对这个类应用css .mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table caption {border: 1pt solid #000000 !important;} 以反映 tinymce 编辑器视图的变化

标签： css angularjs tinymce

【解决方案1】：

使用这个 CSS 应该适合你

.mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table caption{
    border-top: 1pt solid #000000 !important;
    border-right: 2px solid #000000 !important;
    border-bottom: 1pt solid #000000 !important;
    border-left: 2px solid #000000 !important;
 }

【讨论】：