Home...">
Clever Geek Handbook

How do I make html td elements fit the resizing window?

**THIS IS MY HTML**

<div class="table">
<table>
<tr>
<td><a href="otherpage.html">Home</a></td>
<td><a href="otherpage.html">About us</a></td>
<td><a href="otherpage.html">Testimonials</a></td>
<td><a href="otherpage.html">Contact us</a></td>
<tr>
</table>
</div>

THIS IS MY CSS

html,body{
margin:0;
height:100%;
background: linear-gradient(red,pink);
}
.table{
background-color:black;
margin:0;
}
td,a{
padding:25px;
margin:80px;
}

When the window is smaller, some of the text in the td goes to the next line. How to do it? This is normal:
enter image description here

This is after I reduce the size of the window: enter image description here

+3


source to share


3 answers


Try adding the following code to your CSS: td a { white-space: nowrap; }



+1


source 




html,body{ margin:0; height:100%; background: linear-gradient(red,pink); } .table{ background-color:black; margin:0; } td,a{ padding:20px;  }
      

        
        
        
      

    
<div class="table">
<table>
<tr>
<td><a href="otherpage.html">Home</a></td>
<td><a href="otherpage.html">About us</a></td>
<td><a href="otherpage.html">Testimonials</a></td>
<td><a href="otherpage.html">Contact us</a></td>
<tr>
</table>
</div>
Run codeHide result


0


source


add to body width ears: 100% or whatever in ur table specify width and height in percentage so let your table match body width and height then you need to add width: 100% and height: 100% in your css table or whatever percentages you like

-1


source






More articles:


All Articles