Как сделать таблицу/страницу моей отзывчивой?

Question

Как следует из названия, я хотел бы сделать свой стол отзывчивым, чтобы он мог автоматически настраиваться на мобильном устройстве или на рабочем столе. Вот мой код:

article, aside, figure, footer, header, 
 
menu, nav, section { display: block; } 
 
body { 
 
    font-size: 1em; 
 
} 
 

 
h2 { 
 
    font-size: 100%; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
h3 { 
 
    font-size: 100%; 
 
    font-weight: bold; 
 
    color: red; 
 
    text-align: center; 
 
} 
 

 
td { 
 
    min-width: 150px; 
 
    width: 150px; 
 
    text-align: center; 
 

 
    border: 2px solid #ccc; 
 
    vertical-align: top; 
 
} 
 

 
th { 
 
    border: 2px solid #cccccc; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>User ID</th> 
 
     <th>Website</th> 
 
     <th>Time</th> 
 
     <th>Data Usage</th> 
 
     <th>Total Data Usage</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><h2><span style="cursor:pointer">Luke</span></h2></td> 
 
     <td><p>Facebook</p><p>Youtube</p></td> 
 
     <td><p>10.00am</p><p>1.30pm</p></td> 
 
     <td><p>3mb</p><p>1gb</p></td> 
 
     <td><h3>1.3gb</h3></td> 
 
    </tr> 
 
    <tr> 
 
     <td><h2><span style="cursor:pointer">John</span></h2></td> 
 
     <td><p>Facebook</p><p>Youtube</p></td> 
 
     <td><p>10.00am</p><p>1.30pm</p></td> 
 
     <td><p>3mb</p><p>1gb</p></td> 
 
     <td><h3>1.3gb</h3></td> 
 
    </tr> 
 
    <tr> 
 
     <td><h2><span style="cursor:pointer">Peter</span></h2></td> 
 
     <td><p>Facebook</p><p>Youtube</p></td> 
 
     <td><p>10.00am</p><p>1.30pm</p></td> 
 
     <td><p>3mb</p><p>1gb</p></td> 
 
     <td><h3>1.3gb</h3></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Я попытался с помощью JQuery, но я думаю, что я, возможно, сделал это неправильно ха-ха. Любая помощь была бы оценена благодарностью!

Answer 1

Вам нужно использовать «vw» или «vh», который в основном составляет 1% от ширины вашего просмотра и высоты просмотра в виде шкалы вместо пикселей. В настоящее время он поддерживается большинством веб-браузеров, поэтому совместимость не должна быть большой проблемой.

Например:

#test { 
width:25vw; 
height:25vh; 
position:absolute; 
top:25vw; 
left:25vh; 
background-color:rgba(127,127,127,0.5); 
} 

и

<div id="test"></div>