How do I create an HTML table with labels above the column separator boundary lines

Question

I'm trying to create an HTML table that displays reservations like:

   9am      10am     11am
    |--------|--------|--------|
Mon |||        |
    |--------|--------|--------|

I can do most of that easily but I can't figure out how to get the times on the header line to appear centered above the lines between columns as shown above rather than appearing within cells in the columns, e.g.:

       9am      10am     11am
    |--------|--------|--------|
Mon |||        |
    |--------|--------|--------|

I've been playing around with several workarounds including having 3 columns for every "real" column so I can merge them on the header line but that leaves me needing to fill that middle cell for the data lines to make it look like a simple cell boundary so it's not great.

I feel like it's got to be something simple but google and trial-and-error are failing me so far.

I'm trying to do this within a K2 article on a Joomla web site so I'd prefer a way to do this just in HTML, not defining a CSS stylesheet as that opens a whole other problem with K2 articles in Joomla.

EDIT here is what I have thanks to @Johannes' answer but avoiding a CSS stylesheet so I don't have to deal with implementing that in K2/Joomla:




 
9am
10am
11am


Mon
<booked>
<booked>

user_5641669 · Answer

You can do it the following way: Wrap the time indications in span tags. Make those spans inline-blocks, left-align them inside their th and move them to the left by half of their own length using transform: translateX(-50%);:

table {
  border-collapse: collapse;
  margin-left: 20px;
}

td {
  border: 1px solid #ccc;
  padding: 5px 15px;
}

th {
  font-weight: normal;
  text-align: left;
}

th>span {
  display: inline-block;
  transform: translateX(-50%);
}


  
    9:00
    10:00
    11:00
    12:00
  
  
    entry 1
    entry 2
    entry 3
    entry 4
  
  
    entry 5
    entry 6
    entry 7
    entry 8

How do I create an HTML table with labels above the column separator boundary lines

1 Answers