Try ShortPoint nowBy default, the columns of ShortPoint Table Design Element have width set by your browser.
As you can see, some columns (marked red in the screenshot below) are too narrow, while the rest are too wide:
But you can modify the columns' width individually with some custom CSS.
Now the table's columns are more compact and the text in its cells fit the width we have set. Does it look better? If you like it, please follow the steps in this support article.
Before we begin
There is no possibility to input a custom CSS into the Table Design Element itself. The Table should have the parent element, and then we can apply the custom CSS to it. The Table will inherit then the custom CSS from the parent element.
For the purpose of this article, we have decided to use Panel as a parent to the Table.
Note: you can use any content holder Design Element you like (Tabs, Accordions, Toggles etc.) or go with the layout element (Row) here.
Step 1: Edit the page
Click the Edit button, as shown in the images below.
Modern experience:
Classic experience:
Step 2: Edit the web part
Skip this step if you are using Classic experience.
After choosing a ShortPoint Table to modify, click the Edit web part button.
Step 3. Put the Table into a parent element
As mentioned earlier, we are going to use the Panel design element as a parent for Table.
We need to put the Table into a Panel - that is how the Panel will become the parent element of a Table.
You can do this in three ways: add Panel element to an existing row, add Panel to a new row of the same section, add Panel to a row of a new section.
Below we will show you how to put the Table into a Panel into existing row of the section.
1. Put your mouse cursor to the existing row text field and click the blue plus icon to insert the ShortPoint.
2. Select Panel from the Page Builder.
Click Insert.
The Panel should now be added to the same row as Table.
3. Copy and paste the Table to your Panel.
Click the three dots icon of the Table to open the Other actions option.
Select Copy.
Right-click in the Panel element empty text field and select Paste from the drop down. Alternatively, use the command Ctrl+V (Cmd+V for Mac). The Table is now inserted into Panel:
4. Remove the single Table element.
Click the cross icon of the Table:
Now our section has only the Panel element:
Step 4. Copy the custom CSS
Here it is the code you will need to use, please copy it:
/**
* to customize the width for table ShortPoint element you have to:
* 1.) write specific width for each column as follows
* 2.) the sum of all widths written should be equal to 100%
*/
/* first column */
.shortpoint-table tr td:nth-child(1) {
width: 20%;
}
/* second column */
.shortpoint-table tr td:nth-child(2) {
width: 20%;
}
/* third column */
.shortpoint-table tr td:nth-child(3) {
width: 20%;
}
/* 4th column */
.shortpoint-table tr td:nth-child(4) {
width: 20%;
}
/* ... column */
.shortpoint-table tr td:nth-child(5) {
width: 20%;
}Note: You can modify the code above and set a preferred width for every column in your table, changing the percentage. Please make sure that the total percentage remains 100%.
Step 5. Open the Custom CSS settings of the parent element
Click the cog wheel icon of the Panel element to open the settings:
You will see this window after you open the settings:
Switch to the Custom CSS tab:
Step 6. Update the parent element with CSS code
Paste the code into the Custom CSS field:
Note: Always make sure that the number of your column is the same as the number of the nth-child in the parenthesis:
Click Update:
Result
That's it. Now the columns of our table have the different width, just as we modified it:
If you would like to have a more detailed instruction on how to use Custom CSS codes in ShortPoint Page Builder Elements, please visit this article: How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial).
Related articles:
