table test

testy

by Elbusta

HTML

<div class="wrapper">
  <table style="table-layout: fixed; width: 90vw;">
    <colgroup>
      <col class="time-cell">
      <col class="time-cell">
      <col class="time-cell">
      <col class="time-cell">
      <col class="time-cell">
      <col class="time-cell">
      <col>
      <col>
      <col class="time-cell">
      <col class="time-cell">
      <col class="time-cell">
      <col class="time-cell">
      <col class="time-cell">
      <col class="time-cell">
      <col class="time-cell">
    </colgroup>
    <thead>
      <tr>
        <th class="not-table" colspan="15">
        <div class="title">
            <p style="display:inline">
              test nadia
            </p>
            <p style="margin-left:8em; display:inline">
              title thing
            </p>
          </div>
        </th>
      </tr>
      <tr>
        <th colspan="7" rowspan="2">
          <span class="red">RED TEXT</span>
          <br>
          Sub Title - some text
          <br>
          Sub title
          <br>
          <span>
            Left text
            <span class="middle">Middle Text</span>
          </span>
          <br>
        </th>
        <th style="border-bottom: 0; padding-left: .4em;" colspan="8">
          Month
          <span style="float:unset;padding-left:1em;">
            April 2022
          </span>
          <br>
          Day
        </th>
      </tr>
      <tr class='center'>
        <th>Time</th>
        <th>11</th>
        <th>12</th>
        <th>13</th>
        <th>14</th>
        <th>15</th>
        <th>16</th>
        <th>17</th>
      </tr>
    </thead>

    <tbody class="center">
      <tr>
        <td class="main-content" colspan="7" rowspan="6">
          <div>
            <div>
              <span class="blue">
                Content Heading Text
              </span>
              <span class="corner">
                ugh
              </span>
            </div>
            <div>
              <span>
               ipsum
 ...

CSS

.wrapper {
  margin-left: 3vw;
}

.title {
  color: blue;
  text-decoration: underline; 
  font-size: 1.2em;
}

table { 
border: 1px solid black;
border-collapse: collapse;
}

tr .not-table {
  font-weight: normal;
}

thead tr {
  text-align:left;
  vertical-align:top;
  border: 1px solid black;
}

td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  padding: .3em;
}

tr td:first {
  border-left: 0;
}

th {
  text-align:left;
  vertical-align:top;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  padding: .3em;
}

.center th, .center td {
  text-align: center;
}

td.main-content {
  text-align: left;
}

span.corner {
  float: right;
  margin-right: 1em;
}

.time-cell {
  width: 26px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

.middle {
  margin-left: 20%;
}

.filled {
  background-color: grey;
}

#rectangle {
  width: 40px;
  height: 20px;
  background: grey;
  border: 1px solid black;
  display: inline-block;
}