HTML table does not line up as expected

Dennis
May 29, 2023
234 views
3 votes
3 Answers

I have created a PHP application that presents a web page based on livestream chat activity. It’s not lining up properly.

The problem is that the "title" (which in this example says "This is where the livestream title should be") should consume all of the Author and Mod areas, and reach into the beginning of the "messages" area (which was created with colspan=2 for that purpose), but instead it stops at the Mod column. I’m using colspan to control this, and colspan does not seem to be doing what I expect. I have tried this with Chrome on several platforms, and with latest Safari on iOS… all with the same result.

Put another way, to be sure it’s clear, the issue I see, is on the red-colored line. I expect the title to dip into the Messages area, with the URL immediately next to it, and not to stop at the Mod column. Also, if one looks closely, that Mod column heading doesn’t exactly align on the right side with the values below it, and that’s probably a result of the same problem.

I can usually do arithmetic pretty reliably up to 5, but in this instance the computer and I disagree about what 2+3 adds up to. Any idea what I must do in order to resolve this?

headingLink {
  color: white;
  text-decoration: none;
}

.freeze-table {
  border-spacing: 0;
  padding: 0;
}

thead th {
  top: 0;
  position: sticky;
  background-color: #666;
  color: #fff;
  z-index: 20;
  min-height: 30px;
  height: 30px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

th,
td {
  padding: 0 5px;
  font-name: Courier;
  font-size: 12;
  outline: 1px solid #ccc;
  border: none;
  outline-offset: -1px;
  padding-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

tr {
  min-height: 25px;
  height: 25px;
}

pageElement {
  display: flex;
  flex-wrap: nowrap;
  align-items: center
}

* {
  padding: 0;
  margin: 0;
}

.fit {
  /* set relative picture size */
  max-width: 100%;
  max-height: 100%;
}

.center {
  display: block;
  margin: auto;
}

.imgbox {
  display: grid;
  width: 100%;
}

.center-fit {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
}

<table>
  <thead>
    <tr>
      <th colspan=2 style='text-align:center;font-weight:bold;'>&nbsp;Date/Time&nbsp;</th>
      <th style='font-weight:bold;'>Author</th>
      <th style='font-weight:bold;text-align:center;'>Mod</th>
      <th colspan=2 style='font-weight:bold;'>Message</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td colspan=2 style='text-align:center;color:red;font-weight:bold;'>2023-05-14</td>
      <td colspan=3 style='color:red;font-weight:bold;'>2023-05-14 This is where the livesteam title should be</td>
      <td style='text-align:right;'><a href='https://youtu.be/dummy'>https://youtu.be/dummy</a></td>
    </tr>

    <tr>
      <td style='text-align:right;color:Black;'>1&nbsp;R</td>
      <td style='text-align:center;color:Black;'>07:21&nbsp;(1:14:21)</td>
      <td style='text-align:left;color:Black;'>Some Watcher</td>
      <td style='text-align:center;color:Black;'> (Mod)</td>
      <td colspan=2 style='text-align:left;color:Black;'><a href="https://youtu.be/ddummy?t=4461" target="_blank">_</a>&nbsp;Thanks for the concert Brother</td>
    </tr>
  </tbody>
</table>

Tags: html html-table

Answers

Try this:

headingLink {
              color: white;
              text-decoration: none;
            }
        
            .freeze-table {
              border-spacing: 0;
              padding: 0;
            }
        
            thead th {
              top: 0;
              position: sticky;
              background-color: #666;
              color: #fff;
              z-index: 20;
              min-height: 30px;
              height: 30px;
              text-align: left;
            }
        
            tr:nth-child(even) {
              background-color: #f2f2f2;
            }
        
            th,
            td {
              padding: 0 5px;
              font-name: Courier;
              font-size: 12;
              outline: 1px solid #ccc;
              border: none;
              outline-offset: -1px;
              padding-left: 5px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
        
            tr {
              min-height: 25px;
              height: 25px;
            }
        
            pageElement {
              display: flex;
              flex-wrap: nowrap;
              align-items: center
            }
        
            * {
              padding: 0;
              margin: 0;
            }
        
            .fit {
              /* set relative picture size */
              max-width: 100%;
              max-height: 100%;
            }
        
            .center {
              display: block;
              margin: auto;
            }
        
            .imgbox {
              display: grid;
              width: 100%;
            }
        
            .center-fit {
              max-width: 100%;
              max-height: 100vh;
              margin: auto;
            }

<table>
              <thead>
                <tr>
                  <th colspan=2 style='text-align:center;font-weight:bold;'>&nbsp;Date/Time&nbsp;</th>
                  <th style='font-weight:bold;'>Author</th>
                  <th style='font-weight:bold;text-align:center;'>Mod</th>
                  <th colspan=2 style='font-weight:bold;'>Message</th>
                </tr>
              </thead>
        
              <tbody>
                <tr>
                  <td colspan=2 style='text-align:center;color:red;font-weight:bold;'>2023-05-14</td>
        <td colspan=3>
        <table>
        <tr>
                  <td style='color:red;font-weight:bold;'>2023-05-14 This is where the livesteam title should be</td>
                  <td style='text-align:right;'><a href='https://youtu.be/dummy'>https://youtu.be/dummy</a></td>
        </tr>
        </table>
        </td>
                </tr>
        
                <tr>
                  <td style='text-align:right;color:Black;'>1&nbsp;R</td>
                  <td style='text-align:center;color:Black;'>07:21&nbsp;(1:14:21)</td>
                  <td style='text-align:left;color:Black;'>Some Watcher</td>
                  <td style='text-align:center;color:Black;'> (Mod)</td>
                  <td colspan=2 style='text-align:left;color:Black;'><a href="https://youtu.be/ddummy?t=4461" target="_blank">_</a>&nbsp;Thanks for the concert Brother</td>
                </tr>
              </tbody>
            </table>

Have added new <table> with two <td> (title and link) inside of <td colspan=3>

Table cell calculation is complex and fraught. To resolve your problem you need at least one row with individual column cells to act as a basis for the layout.

You can then hide them with CSS and ARIA attributes (the latter for accessibility).

.dummy-row {
  height: 1px;
  visibility: hidden;
}

.freeze-table {
  border-spacing: 0;
  padding: 0;
}

thead th {
  top: 0;
  position: sticky;
  background-color: #666;
  color: #fff;
  z-index: 20;
  min-height: 30px;
  height: 30px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

th,
td {
  padding: 0 5px;
  font-name: Courier;
  font-size: 12;
  outline: 1px solid #ccc;
  border: none;
  outline-offset: -1px;
  padding-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

tr {
  min-height: 25px;
  height: 25px;
}

* {
  padding: 0;
  margin: 0;
}

.fit {
  /* set relative picture size */
  max-width: 100%;
  max-height: 100%;
}

.center {
  display: block;
  margin: auto;
}

.imgbox {
  display: grid;
  width: 100%;
}

.center-fit {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
}

<table>
  <thead>
    <tr>
      <th colspan=2 style='text-align:center;font-weight:bold;'>&nbsp;Date/Time&nbsp;</th>
      <th style='font-weight:bold;'>Author</th>
      <th style='font-weight:bold;text-align:center;'>Mod</th>
      <th colspan=2 style='font-weight:bold;'>Message</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td colspan=2 style='text-align:center;color:red;font-weight:bold;'>2023-05-14</td>
      <td colspan=3 style='color:red;font-weight:bold;'>2023-05-14 This is where the livesteam title should be</td>
      <td style='text-align:right;'><a href='https://youtu.be/dummy'>https://youtu.be/dummy</a></td>
    </tr>

    <tr>
      <td style='text-align:right;color:Black;'>1&nbsp;R</td>
      <td style='text-align:center;color:Black;'>07:21&nbsp;(1:14:21)</td>
      <td style='text-align:left;color:Black;'>Some Watcher</td>
      <td style='text-align:center;color:Black;'> (Mod)</td>
      <td colspan=2 style='text-align:left;color:Black;'><a href="https://youtu.be/ddummy?t=4461" target="_blank">_</a>&nbsp;Thanks for the concert Brother</td>
    </tr>

    <tr class="dummy-row" aria-hidden="true">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

- Shin_87
- May 25, 2023 at 8:58 pm
- 0 votes
0
I think you have a typo in the next line:
```
<td colspan=3 style='color:red;font-weight:bold;'>2023-05-14 This is where the livesteam title should be</td>
```
Try to change the colspan attribute to 1 as the example below:
```
<td colspan=1 style='color:red;font-weight:bold;'>2023-05-14 This is where the livesteam title should be</td>
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.