响应式表格：在移动视图上从三列变为两列

Question

我有一张桌子，在桌面和平板电脑视图中，有三列。设计师给出的设计表明，在移动视图中，第三列应该消失，而是显示在与第一列相同的单元格中（参见参考照片）

html: 
<table class="todoTable">
            <thead>
                <tr class="header-row">
                    <th class="question-header">Todos</th>
                </tr>
            </thead>
            <tbody>
                <tr class="details-row">
                    <td>
                        Todo 1
                    </td>
                    <td>
                       <div class="incomplete">
                         <span>Incomplete</span>
                      </div>
                    </td>
                    <td>
                        <a href="javascript://">See details</a>
                    </td>
                </tr>
                <tr class="details-row">
                    <td>
                        Todo 2
                    </td>
                    <td>
                       <div class="incomplete">
                         <span>Incomplete</span>
                      </div>
                    </td>
                    <td>
                        <a href="javascript://">See details</a>
                    </td>
                </tr>
                
            </tbody>
        </table>

scss
.todoTable {
   width: 100%;
   margin-top: 20px;
   border-spacing: 0 14px;
   .header-row { 
     th {
       font-weight: 500;
       text-align: left;
       width: 50%;
     }
   }
   .details-row {
     font-size: 16px;
     font-weight: 600;
     td {
       border: 1px solid #CDCDCD;
       border-style: solid none;
       line-height: 40px;
     }
     td:first-child {
       border-left-style: solid;
       border-top-left-radius: 4px; 
       border-bottom-left-radius: 4px;
       padding-left: 21px;
     }
     td:last-child {
       border-right-style: solid;
       border-bottom-right-radius: 4px; 
       border-top-right-radius: 4px; 
     }
   }
   .incomplete {
     color: red;
   }
   a {
     text-decoration: underline;
     color: #317cb7;
   }
}

JsFiddle：https://jsfiddle.net/someoneanonymous/8mh16bez/10/

是否可以使用表格元素来实现它，或者我应该考虑使用 div 构建表格？我唯一担心的是我不确定使用 div 执行此操作是否符合可访问性要求。抱歉，我知道我应该先使用移动设备。

Answer 1

您可以尝试创建一个仅用于移动视图的新表格。给它一个显示：无；默认情况下，仅在移动设备上显示。 :-)