技术求助：Summernote表格边框不显示且格式不符合要求

Hey there, sorry to hear you're stuck with table border problems in Summernote! This is a super common snag, but there are a few simple fixes to get those borders showing up and behaving as expected. Let’s walk through them:

1. Inject Custom CSS to Enforce Borders #

Summernote’s default styles often omit visible table borders. You can add custom styling directly to the editor to fix this. Here’s how:

Add this CSS to your page to target the editor’s editable area:

/* Force borders on Summernote tables */
.note-editable table,
.note-editable table th,
.note-editable table td {
  border: 1px solid #ccc !important;
  border-collapse: collapse !important;
  padding: 6px; /* Optional: Add padding for better readability */
}

If you prefer to include this via JavaScript during editor initialization, use the onInit callback:

$('#summernote').summernote({
  toolbar: [['table', ['insertTable', 'addRow', 'addCol']]],
  callbacks: {
    onInit: function() {
      const editorFrame = $(this).find('iframe')[0].contentDocument;
      $('<style>').text(`
        table, th, td {
          border: 1px solid #ccc !important;
          border-collapse: collapse !important;
        }
      `).appendTo($(editorFrame).find('head'));
    }
  }
});

2. Double-Check Table Insertion Settings #

When inserting a table via the Summernote toolbar, some versions let you specify border size upfront. Make sure you’re not setting the border to 0 accidentally. If the tool doesn’t have this option, use the CSS fix above instead.

3. Ensure Final Rendered Content Has Styles #

Sometimes borders show up in the editor but disappear when you save and display the HTML elsewhere. Apply the same border styles to your frontend’s rendered content:

/* For your saved/displayed content */
.your-content-container table,
.your-content-container table th,
.your-content-container table td {
  border: 1px solid #ccc;
  border-collapse: collapse;
  padding: 6px;
}

4. Upgrade to the Latest Summernote Version #

Older versions had known bugs with table styling. If you’re running an outdated release, upgrading to the latest version might resolve the issue without extra code.

Most folks find the custom CSS fix works immediately. If you’re still having trouble, share a snippet of your editor setup or the HTML output of your table, and we can troubleshoot further!

内容的提问来源于stack exchange，提问作者Christian Angelo M Sulit