Help with CSS to format table in a form

asked on December 3, 2024 • Show version history

I am trying to use CSS to change the size of the header font, align everything to the left and remove the spacing between rows in a table on a form. I would also like to change the row label and delete row button to be the same size/spacing as the rest of my table. I can get things to work on the header, but I can't seem to get the rest of the things to work. (I'm a newbie to CSS)

Here is the CSS I currently have and a screen shot of what my table currently looks like (Forms 11 using new forms designer).

.myTable th {
text-align: left;
line-height: 30px !important;
padding: 0px !important;
font-size: 12px !important;
font-weight: normal !important;
}

.myTable tbody td {
padding: 0px !important;
height: 30px !important;
line-height: 30px !important;
}
.myTable .cf-field {
padding: 0px !important;
}

.myTable tbody tr {
padding: 0px !importanat;
height: 30px !important;
line-height: 30px !important;
}

.myTable .cf-row-label {
font-size: 12px !important;
font-weight: normal !important;
}

myTable.png (8.92 KB)

| Download

0 0

APPROVED ANSWER SELECTED ANSWER

replied on December 3, 2024 • Show version history

To remove the spacing between columns/rows:

.MyTable .fl-component {
  padding: 0px !important;}

To set font weight as normal for Row #, and align left:

.MyTable .table-row-labels {
  font-weight: normal !important;
  display: flex;
  align-items: left;
  justify-content: left;}

To align the row delete button to the left:

.MyTable .lf-icon-btn {
  display: flex;
  align-items: left;
  justify-content: left;}

Sorry, I'm a little fuzzy on what else you're wanting to change. Would you mind letting me know what's left?

0 0

replied on December 3, 2024

Thank you - this worked perfectly. I was also trying to align the table headers better with the fields, but changing the spacing on both the columns and rows solved that problem.

0 0

replied on December 3, 2024

No problem at all!

Also, edited to add selectors for the row delete button. :)

0 0

Question

Question

Help with CSS to format table in a form

Answer

Replies

Sign in to reply to this post.