Frage Wie richtet man eine Tabellenspalte vertikal nach oben und unten aus?


..wenn die Spaltenhöhe von der Höhe einer anderen Spalte abhängt? Die Lösung sollte mindestens IE6.7 und Mozilla funktionieren.

HTML-Tabellenlayout:

 + ------------------------ + ---------------------- +
 | oben ausgerichteter Absatz | Hier |
 | | ist ein |
 | | sehr |
 | | lang |
 | | Text |
 | | das |
 | | eventuell |
 | | bestimmt |
 | | der Gesamtbetrag |
 | unten ausgerichteter Absatz | Tischhöhe. |
 + ------------------------ + ---------------------- +
  

9
2018-01-17 10:30


Ursprung


Antworten:


Der einfachste Weg sollte sein, einfach zu verwenden vertical-align oben und unten in den Zellen, die Sie ausrichten möchten:

<table>
<tr>
<td class="top">
<p>Top aligned paragraph</p>
</td>
<td rowspan="2">
<p>Lorem ipsum dolor sit amet consectetuer id egestas condimentum neque elit. Non tortor tempus orci quis condimentum interdum dictum pede Duis enim. Sociis sollicitudin Nulla lacinia risus id sit odio pellentesque Vestibulum et. Ipsum pretium vestibulum et lobortis mauris semper In In id faucibus. Est Integer Curabitur dui Quisque eu habitasse Curabitur gravida vel semper. A libero vel nisl.</p>
</td>
</tr>
<tr>
<td class="bottom">
<p>Bottom aligned paragraph</p>
</td>
</tr>
</table>

und dann das CSS:

.top{
vertical-align:top;
}
.bottom{
vertical-align:bottom;
}

Kopieren | Einfügen weg


8
2018-01-17 10:49



Wenn Sie keine Tabellen verwenden möchten, können Sie Folgendes tun:

<style type="text/css" media="screen">
    .outer {
        position: relative;
        background-color: #EEE;
    }
    .right {
        width: 50%;
        margin-left: 50%;
        background-color: #F88;
    }
    .top,
    .bottom {
        position: absolute;
        width: 50%;
    }
    .top {
        top: 0;
        background-color: #8F8;
    }
    .bottom {
        bottom: 0;
        background-color: #88F;
    }
</style>

<div class="outer">
    <div class="right">Here<br>is a<br>very<br>long<br>text<br>that<br>eventually<br>determines<br>the overall<br>table height.</div>
    <div class="top">top-aligned paragraph</div>
    <div class="bottom">bottom-aligned paragraph</div>
</div>

2
2018-01-17 11:46



Verwenden Sie das rowspan-Attribut (http://www.htmlcodetutorial.com/tables/index_famsupp_30.html), damit der Langtext (Spalte2) zwei Zeilen umfasst. Dann setze Para1 in die erste Spalte der ersten Reihe (oben ausrichten), dann Para2 in die erste Spalte der zweiten Reihe (unten ausrichten).

--------------------------------------
|Para 1 Align Top |This is your very |                   
|                 |long text.  This  |
|                 |is your very long |
|_________________|text.             |
|                 |This is your very |
|                 |long text.  This  |
|                 |is your very long |
|Para2 align bottm|Text.             |
--------------------------------------

2
2018-01-17 13:52