3

There is a bunch of answer on how to set fixed cell sizes here, but I am having trouble finding where in my nested table hierarchy the parameters belong. My table is a visualization of a calendar, with display of possible multiple events. It shows half a year.

My html structure simplified, looks like this:

<table> (whole calendar)
  <tr> (whole row of days)
    <td> (a single day)
      <table> (to be able to display the different data of a single day)
        <tr>
          <td> (displays the weekday name)
          <td> (displays the day of month value)
          <td> (cell to hold single or multiple events)
            <table> (to be able to split up events inside the <td>)
              <tr>
                for each event, through jstl:
                <td> (display of a single event)
                in some cases the event <td> contains both a polygon shape, and text.

The output with to long strings/events looks like this: enter image description here

Notice the line-break when the polygon and the text extends their given space. I love that they do not expand horizontally, but they should not expand vertically either. it should look like this, only with cut strings if they extend their given space

enter image description here

I have tried to set max-height: on various components, both far up and far down in my hierarchy, but it doesn't seem to have any effect. I have also experimented with table-layout: fixed; but this also makes absolutely no noticable change. As far as I can tell, there are aproximately 8-9 levels in my tables that could be the right place to set the fixed height I am looking for. The highest being the very first tr-level, and the lowest being the td that holds a single event.

  1. Do I need to declare max-height and/or fixed table-layout on all levels of the hierarchy?
  2. Are these the right parameters to use?
  3. Is there a golden rule of precedence when using CSS to style nested tables (or other components)?

I would also welcome any tips on my choice of architecture. I have a feeling there are better ways to do it, but for now, my main goal is to make it work, and hopefully I'll get a little wiser every time.

EDIT: according to the answer to this questions answer, I set the white-space: nowrap; on my top table element, and it worked almost as i wanted it. The cells are staying at their fixed height and width, but a little glitch is that the text continues to be displayed outside of it's to small cell.

Community
  • 1
  • 1
jumps4fun
  • 3,994
  • 10
  • 50
  • 96
  • I think add one more child element like P or div, and give fix width to that element – Chandrakant Mar 14 '14 at 10:07
  • Might work. Where in the hierarchy exactly do you suggest I try this? – jumps4fun Mar 14 '14 at 10:09
  • I'm guessing you mean whichever then, as there are several – jumps4fun Mar 14 '14 at 10:12
  • yea exactly I mean same – Chandrakant Mar 14 '14 at 10:13
  • It worked, in a way, but nothing I can use unfortunately. It created various sized spaces (1-3 pixels) inbetween the separate cells containing the whole days. Also, even though the height of the colored 's did shrink to it's supposed size, the text remains under the polygon, and is displayed overlapping the cell below... – jumps4fun Mar 14 '14 at 10:26
  • Have you tried to set the CSS rule `overflow: hidden;` on the text that is inside the `` tags? This should prevent the text from displaying outside its element container. – Alexander Johansen Mar 14 '14 at 10:54
  • That worked. white-space: nowrap; in table scope, and overflow: hidden; in cell-scope, did the trick. – jumps4fun Mar 14 '14 at 11:27
  • Why don't you post the answer to the question if that is working? XD – Federico J. Mar 15 '14 at 00:40
  • text-overflow, white-space and overflow should do when table has a fixed table-layout : http://codepen.io/anon/pen/FkcJz is this what you try to achieve ? – G-Cyrillus Mar 16 '14 at 10:52

1 Answers1

1

If the text should be cutted on the edge of the table cell you have to change the table-layout to fixed and the td needs a hidden overflow.

table{table-layout:fixed}
table td{overflow:hidden}

This link might help as well.

Community
  • 1
  • 1
andreasbecker.de
  • 533
  • 2
  • 12