- Posts
I am building a custom 3 column table with different different column widths using the block mode. When I enter the table it is not unusual for the columns widths to change depending on the length of content. I wish to lock my widths at 45%, 40% and 15%. I do not want them to resize on their own. Can you please advise the best way to accomplish this? I thought about using Tableberg, but this does not seem compatible with the Post and Page Builder plugin. Please advise when possible. Thank you.
Hi Gary, thank you for reaching out with your Post and Page Builder questions! I think we can help with this but by providing a custom css based solution. Could you please link us to the a page that include your table so that we can inspect it using our browser/developer tools?
Please note the change I made below which may have resolved the issue I was experiencing:
<div class=”boldgrid-section” style=”width: auto;”>
<div class=”container”>
<div class=”row”>
<div class=”col-lg-12 col-md-12 col-sm-12 col-xs-12″>
<table class=”bg-table table hide-header table-borderless” style=”width: fixed; height: 736px;” data-num-cols=”3″ data-num-rows=”24″>
<thead>
<tr style=”height: 0px;”>
<th class=”” style=”padding-left: 40px; height: 0px; width: 5%;” data-label=””>Header 1</th>
<th class=”” style=”height: 0px; width: 5%;” data-label=””>Header 2</th>
<th class=”” style=”height: 0px; width: 5%;” data-label=””>Header 3</th>
</tr>
<tr style=”height: 0px;”>
<th style=”padding-left: 40px; height: 0px; width: 5%;”> </th>
<th style=”height: 0px; width: 5%;”> </th>
<th style=”height: 0px; width: 5%;”> </th>
</tr>
</thead>
<tbody>On the line which begins, “<table class, I changed, “style=”width: auto;” to “style=”width: fixed;”
I am not sure if this is a good workaround, but I sure you do. Please advise of your suggestions. Thank you.
Hi Gary,
Sorry for the delayed response! It looks like you’re on the right track! Using
table-layout: fixed;is indeed a good workaround to prevent columns from resizing based on content. This setting locks the table layout, allowing the columns to keep their widths even if the content varies in length.To implement your desired 45%, 40%, and 15% widths consistently, here are a few additional steps to improve stability in the layout:
1. CSS for Fixed Column Widths
- Add a custom CSS rule to explicitly set the widths for each column. This will help ensure that the widths remain constant:
2. Apply CSS in the Customizer or Additional CSS Section
- For better management, you can apply this CSS directly in Appearance > Customize > Additional CSS within your WordPress dashboard. This way, you don’t need to hardcode inline styles every time you create a similar table.
- .`bg-table th:nth-child(1) {
width: 45%;
}
.bg-table th:nth-child(2) {
width: 40%;
}
.bg-table th:nth-child(3) {
width: 15%;
}
.bg-table {
table-layout: fixed;
width: 100%;
}`
Your use of table-layout: fixed; is a good solution and is indeed recommended to lock in those column widths effectively. With these adjustments, your table should maintain consistent widths for each column regardless of content length.
I hope this helps!
- Add a custom CSS rule to explicitly set the widths for each column. This will help ensure that the widths remain constant:
- The topic ‘Lock column widths in table block’ is closed to new replies.
