Home › Forums › WoodMart support forum › about the content of the table cell overlap

about the content of the table cell overlap

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 27, 2025 at 11:39 am #641373

    btools
    Participant

    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.
    February 28, 2025 at 10:42 am #641622

    Hung Pham
    Keymaster

    Hi btools,

    Thanks for reaching to us.

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

    Regards,

    February 28, 2025 at 11:50 am #641656

    btools
    Participant

    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:

    February 28, 2025 at 1:56 pm #641763

    Hung Pham
    Keymaster

    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
Viewing 4 posts - 1 through 4 (of 4 total)