我来帮你搞定这两个需求！原代码的问题在于给每个单元格都加了border-image，导致每个单元格都有红方块，而且相邻单元格的边框重叠显示两条线。下面给你两种可行的解决方案：

纯CSS方案（推荐） #

这个方案不需要额外库，通过给整个表格应用边框图片，再单独处理单元格内部的分隔线，就能实现你要的效果：

CSS 代码 #

/* 表格整体设置边框图片，仅表格四角显示红方块 */
.table-custom {
  border-collapse: separate;
  border-spacing: 0;
  border: 25px solid transparent;
  /* 替换为你的边框图片地址，slice值27要和图片实际尺寸匹配 */
  border-image: url(border.png) 27 fill round;
}

/* 单元格之间的单条分隔线，匹配边框图片的线条风格 */
.table-custom th, .table-custom td {
  border: 0;
  /* 这里的颜色和宽度可以根据你的边框图片线条调整 */
  border-right: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  padding: 8px;
}

/* 去掉最后一列的右边框，避免多余线条 */
.table-custom th:last-child, .table-custom td:last-child {
  border-right: none;
}

/* 去掉最后一行的下边框 */
.table-custom tr:last-child td {
  border-bottom: none;
}

HTML 代码 #

<table class="table-custom">
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
            <th>Lols</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> something here </td>
            <td> whatever </td>
            <td> 6,0% / 12% wag. </td>
        </tr>
    </tbody>
</table>

方案说明 #

1. 给整个表格应用border-image，这样只有表格的四个外边缘会显示带红方块的边框，单元格内部不会有红方块。
2. 使用border-collapse: separate和border-spacing: 0确保表格边框和单元格边框不会重叠。
3. 给单元格添加右侧和底部的普通边框，模拟表格内部的分隔线，保证单元格之间只有单条线。
4. 通过:last-child伪类去掉最后一列的右边框和最后一行的下边框，避免出现多余的线条。

jQuery 辅助方案（适合动态表格） #

如果你的表格是动态生成的（比如通过AJAX加载内容），可以用jQuery来动态调整样式，确保效果正确：

jQuery 代码 #

$(document).ready(function() {
    // 给最后一列的单元格移除右边框
    $('.table-custom th:last-child, .table-custom td:last-child').css('border-right', 'none');
    // 给最后一行的单元格移除下边框
    $('.table-custom tr:last-child td').css('border-bottom', 'none');
});

这个方案需要引入jQuery库，适合内容动态变化的场景，能自动适配表格的行数和列数。

注意事项 #

• 确保border-image的图片路径正确，slice值（代码里的27）要和你的边框图片的实际切片尺寸匹配，否则边框图片会显示变形。
• 单元格边框的颜色和宽度要尽量和边框图片的线条部分一致，这样整体视觉效果更统一。

内容的提问来源于stack exchange，提问作者LastChar23