Home › Forums › WoodMart support forum › About the table width
About the table width
- This topic has 3 replies, 2 voices, and was last updated 1 day, 19 hours ago by
Aizaz Imtiaz Awan.
-
AuthorPosts
-
May 9, 2025 at 6:08 pm #659594
btoolsParticipantPlease see the attached image and refer to the url link in private content.
Why can’t I get the width of this form to be 100% of the width of the parent window? The width of the parent window is actually the width of the red box in my image.
Here is the code for my form:.table-bordered {
display: block; /* 让表格成为块级元素,支持滚动 */
overflow-x: auto; /* 超过宽度时启用水平滚动 */
width: 100%; /* 确保表格宽度适应父容器 */
border-collapse: collapse; /* 确保表格边框合并 */
padding-bottom: 2em !important;
}/* 为表格单元格和表头单元格设置边框和行高 */
.table-bordered td {
border: 0.1px solid #000;
/* 设置边框为0.1像素宽的黑色实线 */
/* line-height: 0.1em; */
line-height: inherit;
padding: 4px 10px;
/* 行高为字体大小的1.5倍,更合理的行高设置 */
font-size: 14px !important;
/* 设定字体大小 */
}/* 设置表头的字体粗细和行高 */
.table-bordered thead th {
border: 0.1px solid #000;
/* 设置边框为0.1像素宽的黑色实线 */
padding: 0.5em;
/* 内边距,调整表头单元格的内部空间 */
line-height: 1.2em;
/* 合理的行高设置 */
white-space: normal;
/* 允许文本换行 */
font-size: 14px !important;
/* 设定字体大小 */
text-align: center;
}
<table class=”table-bordered” style=”width: 100%”>
<caption>3 phase diesel welder generator which can be customized</caption>
<thead>
<tr>
<th width=”40%”>Model</th>
<th width=”60%”>HSD200L3</th></tr>
</thead>
<tbody>
<tr>
<td>Rated voltage</td>
<td>400Vac,230Vac</td>
</tr>
<tr>
<td>Rated power</td>
<td>5.0kw</td>
</tr><tr>
<td>fuel oil</td>
<td>light diesel</td>
</tr>
<tr>
<td>Dimension(mm)</td>
<td>750x550x750</td>
</tr>
</tbody>
</table>Attachments:
You must be logged in to view attached files.May 10, 2025 at 9:05 am #659667
Aizaz Imtiaz AwanKeymasterHello,
Sorry to hear about the inconvenience. Kindly please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and give you a possible solution.
Best Regards,
May 12, 2025 at 11:01 am #659925
btoolsParticipantI’ve provided you with the relevant code, and you can’t see anything related to this issue in the backend of the site, can you?
Please also tell me how to fix this issue, I trust your technical skills.May 12, 2025 at 3:09 pm #660035
Aizaz Imtiaz AwanKeymasterHello,
The issue you’re experiencing with the table not expanding to 100% width is due to this line in your CSS:
.table-bordered { display: block; }
This will allow the table to behave as expected and stretch to the full width of its parent.
.table-bordered { /* display: block; ← remove this */ width: 100%; border-collapse: collapse; padding-bottom: 2em !important; overflow-x: auto; /* Optional: remove if not needed */ }
Best Regards,
-
AuthorPosts
- You must be logged in to create new topics. Login / Register