Profil von ChristSaviour

Thilo1992

12.09.2013, 11:27

HTML/CSS verschiedene Ausrichtungen in einer Tabellenzelle

Hallo,

ich habe eine Tabelle mit Eingabefeldern und Text, jeweils in einem eigenen

. In den ersten beiden Zellen sollen aber zwei inputs mit vorherigem Text dargestellt werden, dazu habe ich im ersten td nur Text und im zweiten dann input-Text-input. Das 1. input und der Text sollen links ausgerichtet sein, das 2. input soll aber rechts ausgerichtet sein, damit der Abstand zu dem Text in der nächsten Spalte so groß ist wie in den Zeilen darunter.

Hier noch ein einfaches Codebeispiel:

<table>
<tr>
    <td>Text</td><td><input>Text<input></td> <!-- Hier soll das zweite input rechts ausgerichtet sein -->
    <td>Text</td><td><input></td>
</tr>
<tr>
    <td>Text</td><td><input></td>
    <td>Text</td><td><input></td>
</tr>
<tr>
    <td>Text</td><td><input></td>
    <td>Text</td><td><input></td>
</tr>
</table>

Ich habe es bereits versucht indem ich dem inpute als style float:right mitgebe oder ein div mit text-align:right drumherum mache. Bei der ersten Methode funktioniert es bei Chrome und FF aber der IE macht einen Zeilenumbruch davor und bei der 2. Methode wird bei allen Browsern ein Zeilenumbruch gemacht.

Ich hoffe mal ihr versteht was ich vorhabe und wisst eine Lösung.

Gruß Thilo

...zum Beitrag

Antwort

von ChristSaviour

12.09.2013, 15:44

Also, schau mal was wir hier haben. Es ist nicht wie in deinem Bild aber, fast dasselbe. Ich konnte die Felder nicht größer machen, da es keine solche Möglichkeit in Html überhaupt gibt (oder ich weiß es nicht mindestens). Merk dich, dass man schreibt so ohne .

<table>
<tr>
    <td>Text<input type="text" name="">
     </td>
     <td>Text<input type="text" name="">
</td> 

<td>Text<input type="text" name="">

</td>
</tr>

 <tr>
<td colspan="2">Text kjkjgrwiuerugwrgrwu<input type="text" name="">
</td> 

<td>Text<input type="text" name="">
    </td>
</tr>

    <tr>
    <td colspan="2">Text kjkjgrwiuerugwrgrwu<input type="text" name="">
    </td> 

        <td>Text<input type="text" name="">
    </td>
</tr>
</table>

...zur Antwort

<table> <tr> <td>Text</td><td><input>Text<input></td>  <td>Text</td><td><input></td> </tr> <tr> <td>Text</td><td><input></td> <td>Text</td><td><input></td> </tr> <tr> <td>Text</td><td><input></td> <td>Text</td><td><input></td> </tr> </table>