#foot{
            position: absolute;
           top: 300px;
            margin-left: 418px;
            padding-bottom: 200px;
            padding-right: 17px;
            margin-bottom: 50px;
        }

#######l{
            position: relative;
            margin-top: 40px;
            top: 10px;
           margin-left:   10px;
            text-decoration: none;
           font-weight: 350;
            color:  black;
            letter-spacing: -1px;
            font-size: 18px;

        }


         #m{
             position: relative;
            margin-top: 40px;
            top: 10px;

            text-decoration: none;
           font-weight: 350;
            color:  black;
            letter-spacing: -1px;
            font-size: 18px;

        }

 th{
            text-align: left;


        }

        td{
            position: relative;
          padding-left:   92.5px;
            height: inherit;

        }



@media(max-width:1100px){

      #foot{
position: absolute;
bottom: 0px;
top: 300px;
}
       #l{
         position: absolute;
margin-top: -30px;
left: -16px;

border-left: none;
                                           border-right: none;
                                        border-top: solid black 1px;
z-index: 1;
color: black;
text-decoration: none;

font-size: 18px;
padding-left: 20px;
padding-bottom: 15px;
padding-top: 15px;

padding-right: 630px;
text-align: justify;
width: 600px;




}
   #m{
         position: relative;
top: -20px;
z-index: 1;
color: black;
text-decoration: none;

font-size: 16px;

text-align: left;
width: 100px;

         }
}

<footer id="foot">    
<table> 
    <tr>
      <th> <a   id="l"> 텍스트 </a> </th>
        <td> <a id="m">20. 10. 20</a> </td>
        </tr>
</table> 

이것을 창을 줄이면 엘리먼트가 제멋대로 이동하는데, 이를 해결하는 방법이 궁금합니다.