移动端tr元素position: relative属性失效原因排查

问题现象 #

• 桌面端点击表格行的“x”按钮，tr会添加swipe类左滑显示删除按钮，功能正常。
• 真实IOS/Android设备上点击无响应，排查发现tr元素的position属性始终为默认的static，即使设置position: relative或添加!important也无效；桌面浏览器模拟移动端则正常。

核心原因 #

移动端浏览器（尤其是IOS Safari）对表格行(<tr>)的position属性支持存在限制，<tr>默认以table-row布局渲染，设置position: relative会被浏览器忽略，导致依赖该属性的left过渡动画无法生效。

解决方案 #

将滑动逻辑从<tr>转移到内部的容器<div>上，利用<div>对position属性的良好支持实现滑动效果，具体修改如下：

1. 修改HTML/PHP结构 #

将每行的内容包裹在一个row-container类的<div>中，合并<td>为一个跨列单元格：

echo "
    <tr>
        <td colspan='4'>
            <div class='row-container'>
                <span class='row-date'>$dateWeighed</span>
                <span class='row-weight'>$weight lbs</span>
                <img class='delete-icon' src='images/delete.png' style='cursor: pointer; width: 15px; height: 15px;'>
                <a href='delete.php?id=$id' class='delete-button'>Delete</a>
            </div>
        </td>
    </tr>
";

2. 调整CSS样式 #

移除<tr>的position相关设置，为容器<div>添加滑动所需的样式：

table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    width: 100%;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}
tbody tr {
    border-bottom: 1px solid #dddddd;
}
.row-container {
    position: relative;
    left: 0;
    transition: left 0.5s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
}
.swipe {
    left: -70px;
}
/* 可选：调整内容项的宽度，保持原表格布局 */
.row-date, .row-weight {
    flex: 1;
    text-align: center;
}

3. 更新JavaScript逻辑 #

修改获取滑动容器的方式，针对内部<div>操作类名：

for(const x of document.querySelectorAll(".delete-icon")){
    x.addEventListener("click", function(){
        const container = this.closest('.row-container');
        container.classList.toggle("swipe");
    });
}

替代方案（若需保留原表格结构） #

如果不想修改表格结构，可强制将<tr>的display改为block，同时调整<td>的布局：

tbody tr {
    border-bottom: 1px solid #dddddd;
    position: relative;
    left: 0;
    transition: left 0.5s;
    display: block;
    box-sizing: border-box;
}
tbody tr td {
    display: inline-block;
    width: 30%; /* 根据实际列数调整宽度 */
    text-align: center;
}
tbody tr td:last-child {
    width: 10%;
}

此方案需注意列宽的适配，避免布局错乱。

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