Html responsive for mobile device

veysel · December 11, 2019

hello,

i have created this table by html and i am changing the content by javascript but when i see the website in mobile device, web interface is not good. İs there any way to do responsive this?

here html :

<html> 
<head> 
<meta charset=utf-8 /> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css"> 

.clr{ color:#25b0e9}
</style>  
</head><body> 
<table id="myTable" border="1"> 
<tbody>
<tr><td></td> 
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>C1</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><b>C2</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> 
<td><b>C3</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><b>C4</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><b>C5</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><b>C6</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><b>C7</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><b>C8</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>

<tr>
<td>&nbsp;</td>
</tr>

<tr>
<td><b>Left (+)</b></td>                                         
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr> 

<tr>
<td>&nbsp;</td>
</tr>


<tr>
<td><b>Left (-)</b></td> 
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr>

<tr>
<td>&nbsp;</td>
</tr>

</tbody>
</table>
</div>
</body></html>

Barand · December 11, 2019

Perhaps something without all those non-breaking spaces

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<title>Example</title>
<style type="text/css">
    table   { width: 80%; margin: 20px auto; font-family: calibri, sans-serif;}
    caption { border-bottom: 1px solid gray; }
    th      { text-align: left; padding: 8px 2px; color: #999;}
    td      { color: #25b0e9; padding: 8px 4px; }
</style>
</head>
<body>
    <table>
        <caption>Channel State</caption>
        <tr>
            <th>&nbsp;</th>
            <th>C1</th>
            <th>C2</th>
            <th>C3</th>
            <th>C4</th>
            <th>C5</th>
            <th>C6</th>
            <th>C7</th>
            <th>C8</th>
        </tr>
        <tr>
            <th>Left (+)</th>
            <td>&check;</td>
            <td>&check;</td>
            <td>&check;</td>
            <td>&nbsp;</td>
            <td>&check;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>Left (-)</th>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&check;</td>
            <td>&check;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</body>
</html>

image.png.de4c19dca50b68b192fe07ff2dd0a2a6.png

Edited December 11, 2019 by Barand

veysel · December 11, 2019

Thank you so much, this is what i search 👍

Sign In

Html responsive for mobile device

Recommended Posts

veysel

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

veysel

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information