How to build this complex (seemingly) table layout

[deeve007]

Hey guys,

This is the table type layout I am trying to build: http://zavahost.com/temp/complex-layout.jpg

Note that some items (appointments) may overlap others, hence the items (cells if using tables) need to span multiple rows.

I’ve tried this with HTML tables, and having an item in the first column span rows is simple. However having an item in the second column do so doesn’t seem to work unless there are 3 columns or more, as indicated by this fiddle: http://jsfiddle.net/bmhLvr4d/

Anyone have any idea on how/the best way to build this, or is it only possible via scripting?

Cheers.

[Mottie]

You really shouldn’t use tables for that. I would recommend using a css column layout (demo)

HTML

<div class="row">
  <div class="column">
    <div class="cell">
      <p>2:00<span>PM</span> Jim Smith</p>
      <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 15 min</em>
    </div>
    <div class="cell">
      <p>2:15<span>PM</span> Patient Name</p>
      <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 30 min
        <div class="spacer"></div>
      </em>
    </div>
    <div class="cell">
      <p>2:45<span>PM</span> Patient Name</p>
      <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 15 min</em>
    </div>
  </div>
  <div class="column">
    <div class="cell">
      <p>2:00<span>PM</span> Bob Jones</p>
      <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 15 min</em>
    </div>
    <div class="cell">
      <p>2:15<span>PM</span> Patient Name</p>
      <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 15 min</em>
    </div>
    <div class="cell">
      <p>2:30<span>PM</span> Patient Name</p>
      <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 30 min
      <div class="spacer"></div>
      </em>
    </div>
  </div>
</div>

CSS

.row {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  padding: 10px;
}
.column {
  -moz-column-width: 50%x;
  -webkit-column-width: 50%;
  column-width: 50%;
}
.cell {
  padding: 10px;
  border-top: 1px solid #777;
}
.cell span {
  font-variant-caps: all-small-caps;
}
.cell em {
  background: #e6e6f8;
  display: block;
  padding: 2px;
}
.cell .spacer {
  height: 30px;
}

The .cell .spacer was included only for appearances…

[deeve007]

Your HTML didn’t come through, but pretty sure there’s no CSS layout that allows for the requirements for this layout unfortunately (and probably confirmed elsewhere, with a scripted solution likely being the only one that will work).

[Mottie]

It looks like I can’t show the HTML properly… you can see it in the jsFiddle I shared.

[deeve007]

The manually added .space is the only reason it appears to work in your example unfortunately. The duration of any appointment within any column could be variable, so it simply won’t work. HTML tables do work where there is 3 columns it seems, just not with only two.

[Paulie_D]

If the appointments are in fixed chunks of 15 minutes say, you could use flexbox

Something like this.

https://codepen.io/Paulie-D/pen/JJMdQM

[deeve007]

The system will allow for different intervals to be set (15min, 10min, 30min), but whatever is set is consistent for that person, so maybe…

Will play around with it a bit. How accepted is flexbox now for an online app?

[Paulie_D]

It depends on what broswer is being used but offhand it’s pretty good.

http://caniuse.com/#feat=flexbox

[deeve007]

Ahh one problem actually (just slipped my mind for a moment), each cell may not be a fixed height, no matter the duration. The cell may also contain additional information, which may at times cause a, say, 30 minute cell to be higher than usual, and there really is no way for the equivalent times in the other column to expand accordingly without using either tables (and then 2 column doesn’t work), or a scripted solution I have come to believe.

[deeve007]

Oops… ignore this for the moment…

[deeve007]

Worked it out… HTML tables, you need to set a minimum height for the TR (use “height” in CSS, acts the same as min-height for other elements), and then use rowspans as required.

Got this working in HTML:
http://zavahost.com/temp/complex-layout2.jpg

[Author]

Posts