Inspiring

Answered

Customizing table

17 replies
2230 views
Translate

Hi everyone,

I have RH 2022.0.346 and I would like to customize a table.

Specifically I would like to obtain rounded edges with a thick edge.

The final result I would like (I am generating a Responsive HTML 5 output) is that of the following figure

I tried using the table settings like border, radius etc... but it doesn't work.

Can you help me?

This topic is closed to new replies. Start a new post to keep the conversation going.

Peter GraingeCorrect answer

Community Expert

Adobe took a look at the code I found and posted. It has been amended as below and now works in a browser as well.

/*TABLE ROUNDED CORNERS*/
table.rounded-corners {
border-spacing: 0;
border-collapse: separate;
border-radius: 15px;
border: 1px solid rgb(0, 85, 160);
}
/* Apply a border to the right of all but the last column */
table.rounded-corners th:not(:last-child),
table.rounded-corners td:not(:last-child) {
border-right: 1px solid rgb(0, 85, 160);
}
/* Apply a border to the bottom of all but the last row */
table.rounded-corners thead tr:not(:last-child) th,
table.rounded-corners thead tr:not(:last-child) td,
table.rounded-corners tbody tr:not(:last-child) th,
table.rounded-corners tbody tr:not(:last-child) td,
table.rounded-corners tfoot tr:not(:last-child) th,
table.rounded-corners tfoot tr:not(:last-child) td,
table.rounded-corners tr:not(:last-child) td,
table.rounded-corners tr:not(:last-child) th,
table.rounded-corners thead:not(:last-child),
table.rounded-corners tbody:not(:last-child),
table.rounded-corners tfoot:not(:last-child) {
border-bottom: 1px solid rgb(0, 85, 160);
}

Thank you Adobe.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Correct answer

Community Expert

Adobe took a look at the code I found and posted. It has been amended as below and now works in a browser as well.

/*TABLE ROUNDED CORNERS*/
table.rounded-corners {
border-spacing: 0;
border-collapse: separate;
border-radius: 15px;
border: 1px solid rgb(0, 85, 160);
}
/* Apply a border to the right of all but the last column */
table.rounded-corners th:not(:last-child),
table.rounded-corners td:not(:last-child) {
border-right: 1px solid rgb(0, 85, 160);
}
/* Apply a border to the bottom of all but the last row */
table.rounded-corners thead tr:not(:last-child) th,
table.rounded-corners thead tr:not(:last-child) td,
table.rounded-corners tbody tr:not(:last-child) th,
table.rounded-corners tbody tr:not(:last-child) td,
table.rounded-corners tfoot tr:not(:last-child) th,
table.rounded-corners tfoot tr:not(:last-child) td,
table.rounded-corners tr:not(:last-child) td,
table.rounded-corners tr:not(:last-child) th,
table.rounded-corners thead:not(:last-child),
table.rounded-corners tbody:not(:last-child),
table.rounded-corners tfoot:not(:last-child) {
border-bottom: 1px solid rgb(0, 85, 160);
}

Thank you Adobe.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Translate

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

IMPORTANT UPDATE

I have since found a bug. This worked in the RoboHelp editor, in Preview and when I used the View With options. With other methods I had tried they gave a true rendering. With this method though when you generate for real, rather than previews, the internal borders don't show. Grr.

I will continue to work with this and post a solution, when found.

It only worked for @elisa23592620fepw as she was using a single cell.

UPDATE 2

I have been unable to fix this issue. If anyone with code knowledge can get this code to work when a project is generated, please post the solution.

****************************************

I found this code on CSS Rounded Table Corners | UnusedCSS (unused-css.com) that seems to work. I have changed the radius to make it more obvious.

****************************************

table.rounded-corners {
border-spacing: 0;
border-collapse: separate;
border-radius: 20px;
border: 1px solid black;
}

/* Apply a border to the right of all but the last column */
table.rounded-corners th:not(:last-child),
table.rounded-corners td:not(:last-child) {
border-right: 1px solid black;
}

/* Apply a border to the bottom of all but the last row */
table.rounded-corners>thead>tr:not(:last-child)>th,
table.rounded-corners>thead>tr:not(:last-child)>td,
table.rounded-corners>tbody>tr:not(:last-child)>th,
table.rounded-corners>tbody>tr:not(:last-child)>td,
table.rounded-corners>tfoot>tr:not(:last-child)>th,
table.rounded-corners>tfoot>tr:not(:last-child)>td,
table.rounded-corners>tr:not(:last-child)>td,
table.rounded-corners>tr:not(:last-child)>th,
table.rounded-corners>thead:not(:last-child),
table.rounded-corners>tbody:not(:last-child),
table.rounded-corners>tfoot:not(:last-child) {
border-bottom: 1px solid black;
}

****************************************

When you have applied the style by clicking the table breadcrumb and selecting the table style in the Styles panel, it will not immediately show the rounded corners.

Go to the code view of the topic and you will see this at the start of the table.

Edit that so that it reads

You will see what appears to be a sharp corner in the editor. They are just the cell guidelines. In Preview and when you generate, they will not show

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Translate

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

E

elisa23592620fepwAuthor

Inspiring

thanks so much Peter!

I used the code you gave me modifying it as follows

and it works! as shown in the following image

Translate

Peter Grainge

Community Expert

I think the modification you have used might only be working because it is one cell. You did ask for a table style so I thought you would want more than one cell.

If the note is only to have one cell, you don't need a table and it's a whole lot easier to modify a paragraph style.

This would do what you want.

p.emphasis1 {
color: rgb(0, 84, 159);
font-size: 10pt;
font-weight: normal;
margin-top: 6pt;
margin-bottom: 10pt;
padding: 6pt;
font-family: Verdana, sans-serif;
border: solid 2px rgb(140, 180, 225);
background-color: rgb(239, 242, 249);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

That said, a two cell table might help you align the image and the text better.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Translate

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

This is the one that nearly works.

Without the line in red, there are no vertical borders in the cells, just the table borders and horizonal borders for the cells.
With that line you get the vertical borders but of course you then get the table border and the cell border in the end column.

table.roundedCorners {

border: 1px solid DarkOrange;

border-radius: 20px;

border-spacing: 0;

}

table.roundedCorners td,

table.roundedCorners th {

border-bottom: 1px solid DarkOrange;

border-right: 1px solid DarkOrange;

padding: 10px;

}

table.roundedCorners tr:last-child>td {

border-bottom: none;

}

Somehow the end column needs to have a different border-right from the other cells.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Translate

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

E

elisa23592620fepwAuthor

Inspiring

thanks Peter...

Translate

A

Amebr

Community Expert

This note is most likely a div with a border and border-radius set. If you go to where you took that screenshot and inspect the code as described by frameexpert you should be able to find the css and html to set it up. You'll be able to set up some of it using the RH user interface but I'm pretty sure not all of the properties are available as fields, so you'll have to get into the code at some point.

Translate

E

elisa23592620fepwAuthor

Inspiring

Thanks Amebr,

the problem is that I entered the code by inserting the command " border radius: 10px" but it doesn't seem to work

Translate

Peter Grainge

Community Expert

The change should be possible by clicking the Table breadcrumb that then brings up the table properties. There you will find a Radius setting. Don't bother trying it as it doesn't seem to work. The same setting can by applied to say H1 and it works.

I have taken this up with Adobe and they have given me some code methods that should work and do work in the CSS editor. There you can see an example with the rounded corner. However, that same style in a topic does not show the rounded corner. To me it's looking like a bug so I have gone back with screenshots to prove my point.

I will post back once I hear back.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Translate

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

E

elisa23592620fepwAuthor

Inspiring

Thanks so much Peter! I'm waiting for your response!

Translate

Peter Grainge

Community Expert

We found one solution that works except the right hand border in the end column has a border from the table and the cell. Getting rid of the border from that cell is proving tricky.

There are loads of solutions if you Google but they all have one issue or another.

Working on it.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Translate

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.