Jump to content
Please Use CODE Tags

HTML Calendar

tomasesp
By tomasesp
in Programming
 Share
Posted

hello I'm creating a calendar. How can make my table td not change width when i put in data. In my source code for my CSS file, the td with is set to 100px but it stills changes when data is inserted.  

I use,

#Table td{

  width:100px;
  border:1px solid black;

} 

<!DOCTYPE html>
<html>
<head>
   
    <title></title>
    <link href="../CSS/CalendarStyle.css" rel="stylesheet" />
    <meta charset="utf-8" />
</head>
<body>
    <div id="SocialMedia" align="right">
            Fallow Us at:
            <a href="#"><img src="Pictures/SocialMediaIcons/Facebook.png" alt="Facebook" /></a>
            <a href="#"><img src="Pictures/SocialMediaIcons/Linkedin.png" alt="Linkedin" /></a>
            <a href="#"><img src="Pictures/SocialMediaIcons/Twitter.png" alt="Twitter" /></a>
        </div>
    <div id="top">
        <div id="Banner"></div>
        <div id="Nav">
            <ul>
                <li><a href="MainPage.html">Home</a></li>
                <li><a href="AboutUs.html">About Us</a></li>
                <li><a href="EventPage.html">Events</a></li>
                <li><a href="../Calendar.html">Calendar</a></li>
            </ul>
        </div>
    </div>
    <div id="SecondBody">
        <table id="Table" height="900px"  width="800px" cellpadding="0" cellspacing="0">
            <tr id="Monthname">
                <td colspan="7" align="center" height="100px"><h5>March 2016</h5></td>
            </tr>
            <tr id="Days" align="center">
                <td>Sunday</td>
                <td>Monday</td>
                <td>Tuesday</td>
                <td>Wensday</td>
                <td>Thursday</td>
                <td>Friday</td>
                <td>Saturday</td>
            </tr>
            <tr>
                <td class="blankdata"></td>
                <td class="blankdata"></td>
                <td>1 asdfdsfsadfsadfasdfsdfdfasdsdfsdff</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
            </tr>
            <tr>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td>17</td>
                <td>18</td>
                <td>19</td>
            </tr>
            <tr>
                <td>20</td>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
                <td>26</td>
            </tr>
            <tr>
                <td>27</td>
                <td>28</td>
                <td>29</td>
                <td>30</td>
                <td>31</td>
                <td class="blankdata"></td>
                <td class="blankdata"></td>
            </tr>
        </table>
    </div>
    <div id="BottomNav"></div>
</body>
</html>

.This one is my CSS file. 

body {

}
#SocialMedia{
    font-size:20px;
    background-color:aquamarine;
}
#Nav{
    align-content:center;
    background-color:aquamarine
}
#Nav ul{
    height: 20px;
    width:1000px;
    margin:0 auto;
}
#Nav ul li{
    list-style-type:none;
    width:225px;
    float:left;
    text-align:center;
    border:1px solid black;
}
li a{
    text-decoration:none;
    color:black;
    line-height:20px;
    display:block;
}
#SecondBody{
   align-items:center;
}
#Table{
    border:1px solid black;
    margin-left:auto;
    margin-right:auto;
    clear:both;
}
#Table td{
    width:100px;
    border:1px solid black;
  
}
.blankdata{
    background-color:gray;
}
#Days{
    background-color:lightblue;
    width:auto;
}
#Days td{
    border:1px solid black;
    height:30px;
}
#Monthname {
    font-size: 40px;
    background-image: url('../Pictures/Seasons/Spring.jpg');
}

 

Capture.PNG

Link to comment
https://linustechtips.com/topic/567510-html-calendar/
Share on other sites
Link to post
Share on other sites
Posted
11 minutes ago, tomasesp said:

 

when i try that it will make the height of the td longer. 

https://jsfiddle.net/prolemur/h6ksLagx/

Needed to set the table to fixed and the table data to word wrap, also td height didn't have a value, so I made it 100px

Link to comment
https://linustechtips.com/topic/567510-html-calendar/#findComment-7454250
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×