only one column width changes when the table is fixed in htmlcss

Apply width: 100% only to the table itself (#c_calendar ), not to the cells or other elements (i.e. erase it from the rule for .c_calendar, .c_th, .c_td, .c_week).

If you want the first column to be wider than the others, you can apply a min-width setting to it.

Edit: If you want all other cells to always have the same width, you can apply a min-width to .c_td, which I just added in my snippet below.

To force all cells to have the same width (if possible, depending on content), you can also simply apply min-width to td (and maybe also th).

/* basic style*/

.c_container{
  margin:0 auto;
  width: 80%;
  height: auto;



}
.c_week{
  font-weight: bold;
  background-color: rgba(255,0,0,0.2);
}
.c_td {
  min-width: 50px;
}
.c_td:hover{
  background-color: #add8e6;
}
.c_November{
  text-align: center;
  background-color: #CDCDCD;
}
.c_weekdays{
  color: black;
  background-color: #D0F0C0;
}
#c_calendar {
  width: 100%;
 }
.c_calendar, .c_th, .c_td, .c_week{
  table-layout: fixed;
  text-align: center;
  font-size: 20px;
  border:3px solid #000;
  border-collapse: collapse;
  cursor: pointer;

}
.c_td{
  text-align: left;
  vertical-align: top;
  font-size: 10px;

}

/* markere helg */

.c_weekend{
  background-color: #FED8E1;
}
/* markerer datoer som ikke er i november */
.c_graydays{
  background-color: #D3D3D3;
}

/* markere spesielle hendelser*/

.c_expedition, .c_talent, .cr_talent{
  background-color: #FFFCBB;
}
/* hover*/
.c_expedition .c_expeditiontext {
  visibility: hidden;
  color: white;
  background-color: black;
  text-align: center;
  position: absolute;
  z-index: 2;
  border-radius: 8px;
  padding: 10px;
}
.c_expedition:hover .c_expeditiontext {
  visibility: visible;
}

.c_talent .c_talenttext {
  visibility: hidden;
  color: white;
  background-color: black;
  text-align: center;
  position: absolute;
  z-index: 2;
  border-radius: 8px;
  padding: 10px;
}
.c_talent:hover .c_talenttext {
  visibility: visible;
}
.cr_talent .cr_talenttext {
  visibility: hidden;
  color: white;
  background-color: black;
  text-align: center;
  position: absolute;
  z-index: 2;
  border-radius: 8px;
  padding: 10px;
}
.cr_talent:hover .cr_talenttext {
  visibility: visible;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Calendar</title>
    <link rel="stylesheet" href="calendar.css">
    <script type="text/javascript" src="calendar.js" async></script>

  </head>
  <body>

    <div class="c_container">
      <div class="c_November" >
        <h2 id="c_title">November 2020</h2>

      </div>
      <table id="c_calendar" >
        <tr>
          <th class="c_weekdays c_th">Week</th>
          <th class="c_weekdays c_th">Mon</th>
          <th class="c_weekdays c_th">Tue</th>
          <th class="c_weekdays c_th">Wed</th>
          <th class="c_weekdays c_th">Thu</th>
          <th class="c_weekdays c_th">Fri</th>
          <th class="c_weekdays c_th">Sat</th>
          <th class="c_weekdays c_th">Sun</th>
        </tr>

        <tr>

          <td class="c_week " >44</td>
          <td class="c_graydays c_td" >26</td>
          <td class="c_graydays c_td" >27</td>
          <td class="c_graydays c_td" >28</td>
          <td class="c_graydays c_td" >29</td>
          <td class="c_graydays c_td" >30</td>
          <td class="c_graydays c_weekend c_td"  >31</td>
          <td class="c_weekend c_td">1</td>
        </tr>
        <tr>


          <td class="c_week " >45</td>
          <td class="c_td">2</td>
          <td class="c_td">3</td>
          <td class="c_td">4</td>
          <td class="c_td">5</td>
          <td class="c_td">6</td>
          <td class="c_weekend c_td">7</td>
          <td class="c_weekend c_td">8</td>

        </tr>

        <tr>
          <td class="c_week ">46</td>
          <td class="c_td">9</td>
          <td class="c_td">10</td>
          <td class="c_td">11</td>
          <td class="c_td">12</td>
          <td class="c_td">13</td>
          <td class="c_weekend c_td">14</td>
          <td class="c_weekend c_td">15</td>

        </tr>
        <tr>
          <td class="c_week" >47</td>
          <td class="c_td">16</td>
          <td class="c_td">17</td>
          <td class="c_td">18</td>
          <td class="c_expedition c_td">19
            <span class="c_expeditiontext"> Thursday the 19th of November all pupils will have an expedition to damlia, our local dam. There we will learn more about insects and other wildlife near the dam. The trip will be from 08:00 to 15:00. Meet at the main entrance 07.45 and remember to pack a lunch!</span>
          </td>
          <td class="c_td">20</td>
          <td class="c_weekend c_td">21</td>
          <td class="c_weekend c_td">22</td>
        </tr>

        <tr>
          <td class="c_week ">48</td>
          <td class="c_talent c_td">23
            <span class="c_talenttext">  23rd of november is the time for the biyearly talentshow! The show will take place in auditorium A1 at 18.00 til 21.00.</span>  </td>
          <td class="cr_talent c_td">24
            <span class="cr_talenttext"> This is a rerun of yesterdays talentshow, except this time parents are welcome as well! (at auditorium A1 18.00 - 21:00)</span>

          </td>
          <td class="c_td">25</td>
          <td class="c_td">26</td>
          <td class="c_td">27</td>
          <td class="c_weekend c_td" >28</td>
          <td class="c_weekend c_td">29</td>
        </tr>
        <tr>
          <td class="c_week ">49</td>
          <td class="c_td">30</td>
          <td class="c_graydays c_td" >1</td>
          <td class="c_graydays c_td" >2</td>
          <td class="c_graydays c_td" >3</td>
          <td class="c_graydays c_td"  >4</td>
          <td class="c_graydays c_weekend c_td"  >5</td>
          <td class="c_graydays c_weekend c_td" >6</td>
        </tr>

      </table>
    </div>


  </body>
</html>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top