CODEWITHSUNDEEP
htmlcsshtml-table
Marius K.
Marius K.

Reputation: 367

Table cell alignment like in a calendar

I have a HTML table that is a calendar and I want to align the day numbers to the upper left corner.

Current state:

HTML:

   <table border="1px" id="cal">
        <tr id="cal-header-row">
            <th class="header-col">CW</th>
            <th class="header-col">Monday</th>
            <th class="header-col">Tuesday</th>
            <th class="header-col">Wednesday</th>
            <th class="header-col">Thursday</th>
            <th class="header-col">Friday</th>
            <th class="header-col">Saturday</th>
            <th class="header-col">Sunday</th>
        </tr>
        <tr class="cal-week-row">
            <td class="cal-calendarweek">
                <div class="cal-calendarweek-con">
                    <p class="cal-calendarweek-con-content">36</p>
                </div>
            </td>
            <td class="cal-day-previous cal-day">
                <div class="cal-day-con">
                    <div class="cal-day-con-number-con">
                        <p class="cal-day-con-number-con-text">31</p>
                    </div>
                    
                </div>
            </td>

So far no interesting CSS applied.

I looked into flex boxes but I did not see how I could align the number with it.

If you need more information please let me know and I will add them.

Upvotes: 0

Views: 354

Answers (2)

Johannes
Johannes

Reputation: 67778

Apply margin: 0 to the p in those cells (using selector p.cal-day-con-number-con-text) to reset/set to 0 its default margin-top and margin-bottom, and assign vertical-align: top to the cell itself (using .td.cal-day) for the top alignment, as shown in the snippet below.

p.cal-day-con-number-con-text {
  margin: 0;
}

td.cal-day {
  vertical-align: top;
}
<table border="1px" id="cal">
  <tr id="cal-header-row">
    <th class="header-col">CW</th>
    <th class="header-col">Monday</th>
    <th class="header-col">Tuesday</th>
    <th class="header-col">Wednesday</th>
    <th class="header-col">Thursday</th>
    <th class="header-col">Friday</th>
    <th class="header-col">Saturday</th>
    <th class="header-col">Sunday</th>
  </tr>
  <tr class="cal-week-row">
    <td class="cal-calendarweek">
      <div class="cal-calendarweek-con">
        <p class="cal-calendarweek-con-content">36</p>
      </div>
    </td>
    <td class="cal-day-previous cal-day">
      <div class="cal-day-con">
        <div class="cal-day-con-number-con">
          <p class="cal-day-con-number-con-text">31</p>
        </div>

      </div>
    </td>
    <td class="cal-day-previous cal-day">
      <div class="cal-day-con">
        <div class="cal-day-con-number-con">
          <p class="cal-day-con-number-con-text">1</p>
        </div>

      </div>
    </td>
    <td class="cal-day-previous cal-day">
      <div class="cal-day-con">
        <div class="cal-day-con-number-con">
          <p class="cal-day-con-number-con-text">2</p>
        </div>

      </div>
    </td>
    <td class="cal-day-previous cal-day">
      <div class="cal-day-con">
        <div class="cal-day-con-number-con">
          <p class="cal-day-con-number-con-text">3</p>
        </div>

      </div>
    </td>
    <td class="cal-day-previous cal-day">
      <div class="cal-day-con">
        <div class="cal-day-con-number-con">
          <p class="cal-day-con-number-con-text">4</p>
        </div>

      </div>
    </td>
    <td class="cal-day-previous cal-day">
      <div class="cal-day-con">
        <div class="cal-day-con-number-con">
          <p class="cal-day-con-number-con-text">5</p>
        </div>

      </div>
    </td>
    <td class="cal-day-previous cal-day">
      <div class="cal-day-con">
        <div class="cal-day-con-number-con">
          <p class="cal-day-con-number-con-text">6</p>
        </div>

      </div>
    </td>
  </tr>
</table>

If you also want the calender week number to be top aligned, use this CSS rule additionally:

td.cal-calendarweek {
  vertical-align: top;
}

Upvotes: 1

jdfink
jdfink

Reputation: 339

You should use position: absolute to position the number relative to the table cell. See below using your markup.

.cal-day-con {
  padding: 0;
}

.cal-day-con-number-con {
  padding: 64px;
  position: relative;
}

.cal-day-con-number-con-text {
  background-color: #ccc;
  border-radius: 50%;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: 0px;
  left: 0px;
  min-width: 16px;
  text-align: center;
}
<table border="1px" id="cal">
  <tr id="cal-header-row">
    <th class="header-col">CW</th>
    <th class="header-col">Monday</th>
    <th class="header-col">Tuesday</th>
    <th class="header-col">Wednesday</th>
    <th class="header-col">Thursday</th>
    <th class="header-col">Friday</th>
    <th class="header-col">Saturday</th>
    <th class="header-col">Sunday</th>
  </tr>
  <tr class="cal-week-row">
    <td class="cal-calendarweek">
      <div class="cal-calendarweek-con">
        <p class="cal-calendarweek-con-content">36</p>
      </div>
    </td>
    <td class="cal-day-previous cal-day">
      <div class="cal-day-con">
        <div class="cal-day-con-number-con">
          <p class="cal-day-con-number-con-text">31</p>
        </div>

      </div>
    </td>
    <td class="cal-day-previous cal-day">
      <div class="cal-day-con">
        <div class="cal-day-con-number-con">
          <p class="cal-day-con-number-con-text">1</p>
        </div>

      </div>
    </td>
  </tr>
</table>

Upvotes: 0

Related Questions