HTML create table

Question

Ich habe Probleme mit dem Tisch zu bekommen wie ich brauche.

Ich brauche Tisch wie diese

Aber was ich gettng behalten ist, dass Äther der Text von sundmused ja hadaabi überlappen oder thevahetused Zelle wird zu breit, so dass die Ausrichtung der thext seltsam bekommt. Kann mir jemand helfen, einen Tisch wie diesen zu erstellen?

Answer 1

Wenn Sie zu kleinen Tisch haben, können Sie text-overflow: ellipsis; verwenden ... hinzufügen, wenn es nicht genug Platz für Text.

table { 
 
    border: 1px solid black; 
 
    table-layout: fixed; 
 
    width: 30%; 
 
    border-collapse: collapse; 
 
    text-align: center; 
 
    margin-bottom: 10px; 
 
} 
 
table:nth-child(2) { 
 
    width: 100%; 
 
} 
 
table:nth-child(3) { 
 
    width: 50%; 
 
} 
 
table td { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    border: 1px solid black; 
 
} 
 

 
.important { 
 
    background-color: yellow; 
 
}

<table> 
 
    <tr> 
 
    <td colspan="3">vahetused</td> 
 
    <td>sundmused</td> 
 
    <td>hadaabid</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="important" colspan="3">01.01.2017.00:00-02.01.2017.00:00</td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Kokku</td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    </tr> 
 
</table> 
 
<table> 
 
    <tr> 
 
    <td colspan="3">vahetused</td> 
 
    <td>sundmused</td> 
 
    <td>hadaabid</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="important" colspan="3">01.01.2017.00:00-02.01.2017.00:00</td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Kokku</td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    </tr> 
 
</table> 
 
<table> 
 
    <tr> 
 
    <td colspan="3">vahetused</td> 
 
    <td>sundmused</td> 
 
    <td>hadaabid</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="important" colspan="3">01.01.2017.00:00-02.01.2017.00:00</td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Kokku</td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    </tr> 
 
</table>

Answer 2

Das sieht verdächtig nach einer Aufgabe aus! Aber trotzdem:

Ich vermute, Ihr Problem ist, dass die ersten zwei Zellen drei Spalten in der unteren Reihe "überspannen", und sie tun dies nicht automatisch. Hinzufügen von colspan="3" zu den Zellen gibt das Ergebnis wie folgt, das ist rate was Sie brauchen.

td { 
 
    text-align: center; 
 
}

<table border="1"> 
 
    <tr> 
 
    <td colspan="3">vahetused</td> 
 
    <td>sundmused</td> 
 
    <td>hadaabid</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="3">01.01.2017.00:00 - 02.01.2017 00:00</td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Kokku</td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    </tr> 
 
</table>

Answer 3

Fügen Sie Ihren Stil mit diesem Code (padding, margin und Farbe)

<table border style='text-align: center;border-collapse: collapse'> 
    <tr> 
    <td COLSPAN=3>vahetused</td> 
    <td>sundmused</td> 
    <td>hadaabid</td> 
    </tr> 
    <tr> 
    <td COLSPAN=3>01.01.2017.00:00 - 02.01.2017.00:00</td> 
    <td>1</td> 
    <td>1</td> 
    </tr> 
    <tr> 
    <td>Kokku</td> 
    <td>1</td> 
    <td> </td> 
    <td>1</td> 
    <td>1</td> 
    </tr> 

</table>