Jump to content

Html responsive for mobile device


Recommended Posts

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>

 

Screenshot_1.jpg

Link to post
Share on other sites

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

image.thumb.png.9c05ebb51b85ee041584a2908f7ff72e.png

Edited by Barand
  • Thanks 1
Link to post
Share on other sites
This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.