2

我将带有箭头的水平面包屑菜单转换为使用:before和:after元素生成箭头的垂直时间线。左列被标记为th并且必须定义为display: block以便可以生成箭头。我的问题是，该定义display: block避免了table-cell根据其table-cell右侧调整其高度。

为了更好地理解，您可以查看此链接

该站点具有响应性，因此我无法定义固定的高度值。如果您将窗口大小调整为小于 400 像素，则会发生错误。

也许有人对我有想法......？:)

这是代码：

<table width="100%" border="0" class="zeitstrahl">
      <tr>
        <th class="datum1" scope="row">1947</th>
        <td>Unternehmensgründung durch Erich Friedrich </td>
      </tr>
      <tr>
        <th class="datum2" scope="row">1951</th>
        <td>Bau der ersten  Aufbereitungsanlage in Stiddien bei Braunschweig,<br>
        Jahresleistung 100.000 t</td>
      </tr>
      <tr>
        <th class="datum3" scope="row">1954</th>
        <td><p>Bau einer Anlage in Salzgitter  Drütte mit einer Jahresleistung <br>
        von 600.000 t</p></td>
      </tr>
      <tr>
        <th class="datum4" scope="row">1964</th>
        <td>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</td>
      </tr>
      <tr>
        <th class="datum5" scope="row">1980</th>
        <td>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.</td>
      </tr>
      <tr>
        <th class="datum6" scope="row">1990</th>
        <td>Bündelung der  Aufbereitungsaktivitäten in einer separaten Gesellschaft und Gründung der Firmen ERICH FRIEDRICH Hüttenservice  GmbH 
        und ERICH FRIEDRICH Handel GmbH</td>
      </tr>
      <tr>
        <th class="datum7" scope="row">2000</th>
        <td>Beginn einer weiteren  Expansionsphase<br>
          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</td>
      </tr>
      <tr>
        <th class="datum8" scope="row">heute</th>
        <td>Aufbereitungsaktivitäten für die <a href="http://www.peiner-traeger.de" title="Peiner Träger GmbH" target="_blank">Peiner Träger GmbH</a></td>
      </tr>
</table>

CSS：

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; }
4

1 回答 1

0

<th>需要display: block在position: relativeFirefox 中生效。但正因为如此，它的高度不会填满表格行，因为它不再像表格单元格一样。

要解决此问题，您必须display: block从<th>. 但是因为我们需要position: relative箭头起作用，所以我将其设置display: block; position: relative;为它的父级：table-row。然后我不得不使用th:after, th:before底部和左侧值，因为百分比不再起作用。我不知道tr { display: block; }, 将来是否会导致任何其他问题，但它确实可以完成工作。

完成此操作后，<th>它将表现为一个普通的表格单元格，当窗口太小时它会缩小。为了解决这个问题，我设置了th { min-width: 120px }.

所以这里是codepen. 更改标有注释。适用于 Chrome、Firefox 和 Opera，但不适用于 IE8-。没有测试过IE8+。

于 2013-01-02T23:08:14.063 回答