Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
Discussion options

Steps to reproduce

  1. go to https://www.tiny.cloud/docs/tinymce/latest/basic-example/
  2. click on menu Insert > Table > 10x10
  3. click on menu Table > Table Properties
  4. click on Advanced
  5. select Dashed (or any other than solid)
  6. select a color for the border
  7. click Save

Description of Image

✔️ Expected result

the whole table and cells have that border style

❌ Actual result

Only the outermost borders of the table have the selected styles.
Inner cells borders are being overwritten by css rule instead of inherited from table's border style.

❓ Possible solution

#10160

You must be logged in to vote

Replies: 3 comments · 2 replies

Comment options

Hi @Mauricio9999. This is a known UX issue. The way tables currently work is that you style table element using table properties and cells using the cell properties dialog. This comes from the early days when the editor was more or less exclusively used to edit HTML in a CMS, and the editor had to be able to deal with as many different combinations of table markup/styling.

So the "correct way" is for you to select all cells and use the cell properties dialog to apply a dashed border.

But we are aware that many users does not thing like this and are periodically researching options.

Since this is technically not a defect in code, I'm going to convert this to a discussion.

You must be logged in to vote
0 replies
Comment options

I provided a solution for the CSS.
I would say it is actually an error in the css provided by default, because that is messing up the normal inheritance of the inline styles of the table.

Sure it is a UX issue, and that is exactly the solution I provided in #10160.

Since this is technically not a defect in code, I'm going to convert this to a discussion.

That is not true. the file you are providing when content_css option is not given is loading this default css modules/oxide/src/less/skins/content/default/content.less

These lines here are breaking the inheritance of border style to the th and td elements.

e.g. consider this html:

<table style="border: 1px dashed red;">
<tr><td>something</td></tr>
</table>

normally the table and the cell will have border: 1px dashed red.
but the rule you provide

table[border]:not([border="0"]):not([style*="border-style"]) th,
table[border]:not([border="0"]):not([style*="border-style"]) td {
  border-style: solid;
}

Is making that the inherited border: 1px dashed red to be ignored.

The solution I provided is:

  • reducing the specificity of that css rule
  • adding more css rules to lookup for border styles in the table and applying it to the cells.
You must be logged in to vote
2 replies
@TheSpyder
Comment options

normally the table and the cell will have border: 1px dashed red.

The table, yes. But not the cell. border-style is not an inherited attribute; Firefox doesn't even inherit border-color to cells. Try this (I can't attach a .html file to github).

<table style="border: 1px dashed red; width: 30%;" border="1">
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>
@LlaoCorp
Comment options

Hello, i have the same issue. Why don't you prevent the merge of border-style, border-with and border-color instead of merge them into border?

Comment options

@lostkeys ☝️

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
4 participants
Converted from issue

This discussion was converted from issue #10159 on February 13, 2025 12:30.

Morty Proxy This is a proxified and sanitized view of the page, visit original site.