#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>
이것을 창을 줄이면 엘리먼트가 제멋대로 이동하는데, 이를 해결하는 방법이 궁금합니다.