title: Left column of vertical table with arrows does not resize
body: <p>I convertet an horizontal breadcrumb-menu with arrow-look into an vertical timeline using <code>:before</code> and <code>:after</code> elements to generate the arrows.
  The Left columns is marked as <code>th</code> and has to defined as <code>display: block</code> so that the arrows can be generated.
  My problem is, that the definition as <code>display: block</code> avoids the <code>table-cell</code> to adjust its height according to the <code>table-cell</code> right of it.</p>
  
  <p>For better understanding, you can have al look at <a href="http://vorschau.e-friedrich.de/ueber-uns/geschichte/" rel="nofollow">this link</a></p>
  
  <p>The site is responsive, so that i cant't define fixed height-values.
  The error occurs if you resize the window to less than 400px.</p>
  
  <p>Maybe someone has an idea for me... ?  :)</p>
  
  <p>Here ist the code:</p>
  
  <pre><code>&lt;table width="100%" border="0" class="zeitstrahl"&gt;
        &lt;tr&gt;
          &lt;th class="datum1" scope="row"&gt;1947&lt;/th&gt;
          &lt;td&gt;Unternehmensgründung durch Erich Friedrich &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th class="datum2" scope="row"&gt;1951&lt;/th&gt;
          &lt;td&gt;Bau der ersten  Aufbereitungsanlage in Stiddien bei Braunschweig,&lt;br&gt;
          Jahresleistung 100.000 t&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th class="datum3" scope="row"&gt;1954&lt;/th&gt;
          &lt;td&gt;&lt;p&gt;Bau einer Anlage in Salzgitter  Drütte mit einer Jahresleistung &lt;br&gt;
          von 600.000 t&lt;/p&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th class="datum4" scope="row"&gt;1964&lt;/th&gt;
          &lt;td&gt;Standortwechsel nach  Salzgitter-Immendorf und Bau einer Anlage in Salzgitter Immendorf auf dem Gelände des  heutigen Reststoffzentrum 
          Barum (RZB)  mit einer Anfangskapazität von 600.000 t/a und der Erweiterung auf eine  Jahresleistung von 1.200.000 t&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th class="datum5" scope="row"&gt;1980&lt;/th&gt;
          &lt;td&gt;Weltweiter Bau von  Aufbereitungsanlagen    Mit  einem Partner wurden Anlagen u.a. in Indien, China, Ungarn, der UdSSR mit  Jahreskapazitäten von 1,0 bis 3,5 Million t geplant und errichtet.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th class="datum6" scope="row"&gt;1990&lt;/th&gt;
          &lt;td&gt;Bündelung der  Aufbereitungsaktivitäten in einer separaten Gesellschaft und Gründung der Firmen ERICH FRIEDRICH Hüttenservice  GmbH 
          und ERICH FRIEDRICH Handel GmbH&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th class="datum7" scope="row"&gt;2000&lt;/th&gt;
          &lt;td&gt;Beginn einer weiteren  Expansionsphase&lt;br&gt;
            ERICH FRIEDRICH Handel GmbH führt  Entsorgungsdienstleistungen 
              in den Stahlwerken der Salzgitter Flachstahl  GmbH und der 
              Georgsmarienhütte GmbH durch, u.a. den  Transport von flüssiger 
              Schlacke, Betreiben der Schlackebette und  die anschließende 
          Aufbereitung zu wiederverwertbaren Hüttenreststoffen&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th class="datum8" scope="row"&gt;heute&lt;/th&gt;
          &lt;td&gt;Aufbereitungsaktivitäten für die &lt;a href="http://www.peiner-traeger.de" title="Peiner Träger GmbH" target="_blank"&gt;Peiner Träger GmbH&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><em><strong>CSS:</em></strong></p>
  
  <pre><code>table.zeitstrahl { margin-top: 0px; }
  
  .zeitstrahl th {
      position: relative; 
      display: block;
      width: 120px;       
      color: white;
      text-decoration: none; 
      padding: 60px 0 60px 0;
      background: #004993;                   /* fallback color */
      background: hsla(210,100%,15%,1);           
  }
  
  .zeitstrahl th:after { 
      content: " "; 
      display: block; 
      width: 0; 
      height: 0;
      border-right: 60px solid transparent;  /* Go big on the size, and let overflow hide */
      border-left: 60px solid transparent;
      border-top: 30px solid hsla(210,100%,15%,1);
      position: absolute;
      top: 100%;
      left: 50%;          
      margin-left: -60px;
      z-index: 2;
  }
  
  .zeitstrahl th:before { 
      content: " "; 
      display: block; 
      width: 0; 
      height: 0;
      border-right: 60px solid transparent;  /* Go big on the size, and let overflow hide */
      border-left: 60px solid transparent;
      border-top: 30px solid white;
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -60px;
      margin-top: 2px;
      z-index: 1;
  }
  
  .zeitstrahl td { padding: 20px; vertical-align: middle; display:table-cell; }
  
  .zeitstrahl .datum1 { padding-top: 20px; }
  
  .zeitstrahl .datum2 { background: hsla(210,100%,25%,1); }
  .zeitstrahl .datum2:after { border-top-color: hsla(210,100%,25%,1); }
  
  .zeitstrahl .datum3 { background: hsla(210,100%,35%,1); }
  .zeitstrahl .datum3:after { border-top-color: hsla(210,100%,35%,1); }
  
  .zeitstrahl .datum4 { background: hsla(210,100%,45%,1); }
  .zeitstrahl .datum4:after { border-top-color: hsla(210,100%,45%,1); }
  
  .zeitstrahl .datum5 { background: hsla(210,100%,55%,1); }
  .zeitstrahl .datum5:after { border-top-color: hsla(210,100%,55%,1); }
  
  .zeitstrahl .datum6 { background: hsla(210,100%,65%,1); }
  .zeitstrahl .datum6:after { border-top-color: hsla(210,100%,65%,1); }
  
  .zeitstrahl .datum7 { background: hsla(210,100%,75%,1); }
  .zeitstrahl .datum7:after { border-top-color: hsla(210,100%,75%,1); }
  
  .zeitstrahl .datum8 { background: hsla(210,100%,75%,1); margin-top: -30px; }
  .zeitstrahl .datum8:after { border-top-color: hsla(210,100%,75%,1); }
  
  .zeitstrahl th:hover { background: hsla(210,100%,25%,1); }
  .zeitstrahl th:hover:after { border-top-color: hsla(210,100%,25%,1) !important; }
  </code></pre>