响应表不起作用

Question

我创建了一个表格程序，其中一切正常，但是当我尝试使用媒体查询使其响应时，它似乎不起作用，因为你可以看到它是不均匀的。以下是整个代码的CodePen：http://codepen.io/meeksmadness/pen/YNwOoE。如果您需要，我已经提供了一些图片来帮助您，并且感谢任何帮助。

常规屏幕：

响应屏幕：

table {
  position:relative;
  z-index:0;
  overflow:hidden;
  border:1px solid black;
  border-radius:5px;
  border-collapse: collapse;
  display:block;
  max-width:600px;
  width:100%;
  margin:0 auto;
  margin-top:50px;
  background-color:white;
  -webkit-box-shadow: 10px 10px 15px -7px rgba(0,0,0,0.60);
  -moz-box-shadow: 10px 10px 15px -7px rgba(0,0,0,0.60);
  box-shadow: 10px 10px 15px -7px rgba(0,0,0,0.60);
}

tr {
  color:black;
  font-size:18px;
  font-weight:400;
}

tr:nth-child(odd){
  background-color:#C5C5C5;
}

tr:first-child {
  background-color:#191919;
  color:#D3D3D3;
  font-size:23px;
  font-weight:200;
}

tr:first-child td {
  border-bottom:4px solid #696969;
}

tr:last-child td {
  border-bottom:0;
}

td {
  position:relative;
  overflow:hidden;
  width:200px;
  height:auto;
  padding:20px;
  border-bottom:1px solid #474747;
  border-right: 1px solid #474747;
}

td:last-child {
  border-right:0;
}

td span.special {
  display:block;
  float:right;
  cursor:pointer;
}

td>a.delete {
  position:absolute;
  cursor:pointer;
  opacity:0;
  top:0;
  bottom: 0;
  right: 0;
  background: red;
  padding: 18px;
  font-size:22px;
}

@media (max-width:600px){
  table {
    width:100%;
  }
}

@media (max-width:357px){
  td span.special {
    float:none;
    text-align:center;
  }
}