about the content of the table cell overlap

I publish the technical parameters of the product, using the tab to write table code, but when the content of the table cell is a little longer, the width of the cell can not accommodate the length of the content, the content of the cell will overlap, and will not be displayed in a new line.
I write the table code below:
<table class=”table-bordered” style=”width: 100%;”><caption>manual dildo</caption>
<thead>
<tr>
<th width=”20%”>SKU</th>
<th width=”20%”>241004S</th>
<th width=”20%”>241004M</th>
<th width=”20%”>241004L</th>
<th width=”20%”>241004XL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Size</td>
<td>S</td>
<td>M</td>
<td>L</td>
<td>XL</td>
</tr>
<tr>
<td>Function</td>
<td colspan=”4″>manual</td>
</tr>
<tr>
<td>Material</td>
<td colspan=”4″>TPE</td>
</tr>
<tr>
<td>Waterproof Rating</td>
<td colspan=”4″>IPX7</td>
</tr>
<tr>
<td>Product Net Weight</td>
<td>133g</td>
<td>218g</td>
<td>269g</td>
<td>317g</td>
</tr>
<tr>
<td rowspan=”3″>Product Dimensions</td>
<td>Length: 152mm</td>
<td>Length: 180mm</td>
<td>Length: 210mm</td>
<td>Length: 223mm</td>
</tr>
<tr>
<td>Diameter: 32mm</td>
<td>Diameter: 34mm</td>
<td>Diameter: 37mm</td>
<td>Diameter: 40mm</td>
</tr>
<tr>
<td>Insertion Depth: 109mm</td>
<td>Insertion Depth: 130mm</td>
<td>Insertion Depth: 150mm</td>
<td>Insertion Depth: 170mm</td>
</tr>
</tbody>
</table>

because of the content “Insertion Depth: 109mm” of the table cell is a little long, so that overlap.
Please see the following image, please tell me how to solve this problem?

Attachments:

You must be logged in to view attached files.

Hi btools,

Thanks for reaching to us.

Please provide URL of the mentioned page, so I can take a closer look.

Regards,

I set the css below:

/* 为表格单元格和表头单元格设置边框和行高 */
.table-bordered td {
border: 0.1px solid #000;
/* 设置边框为0.1像素宽的黑色实线 */
line-height: 0.1em;
/* 行高为字体大小的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;
}

the URL of the mentioned page is in the private content below:

Hi btools,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

table.table-bordered td {
    line-height: inherit;
    padding: 5px 12px;
}

Regards,

[Author]

Posts