Habe auf der Seite eines Freundes eine Zelle zu Tabelle hinzugefügt! kann das Ergebnis nicht verstehen.
Auf der Speisekarte sollen vor den eigentlichen Essen eine Nr. stehen. Kann ja nicht so schwer sein. Dachte ich.
Aber die 1. Rubrik lässt sich den anderen nicht anpassen. ( Also jedenfalls nicht von mir )
Vielleicht findet einer von euch den Fehler, der sich meiner Wahrnehmung beharrlich verweigert.
Code
.modal-content{
background-color: #f2dd59;
color: rgb(2, 0, 0);
}
.modal-header {
background-color: #DAA900;
}
.modal-title {
color: #fff;
font-size: 20px;
font-weight: 400;
}
.modal h2 {
color: #860303;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-style:italic;
}
.modal h4 {
font-size: 2.5em;
color: #860303;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-style:italic;
}
.modal p {
margin-left: 10px;
text-align: center;
}
.modal hr {
height: 2px;
width: 96%;
border: 0;
border-top: none;
text-align: center;
position: relative;
background: #860303;
}
.table{
width:100%;
}
.table>tbody>tr>td{
border:none;
}
.sp1{
width: 10%;
text-align: left;
font-weight: bold;
}
.sp2{
width: 20%;
text-align: left;
font-weight: bold;
}
.sp3{
width: 60%;
text-align: left;
}
.sp4{
width: 10%;
text-align: right;
}
.center {
text-align: center;
}
.mitte {
font-weight: bold;
text-align: center;
}
.mitte-bolder {
font-size: 1.5em;
font-weight: bolder;
text-align: center;
color: #1c1c1c;
}
@media screen and (max-width: 500px) {
.table .modal tr, .modal th, .modal td {
display:block;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: large;
}
.modal tr {
border-top: 0 none;
}
.sp1{
text-align:center;
width: 100%;
}
.sp2{
text-align:center;
width: 100%;
}
.sp3{
text-align:center;
width: 100%;
}
.sp4{
text-align:center;
width: 100%;
}
}
Alles anzeigen
HTML
<a href="#" class="menu-link" data-toggle="modal" data-target="#myModal"><h2>Ausführliche Speisekarte</h2></a>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h5 class="modal-title">Speisekarte</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<table class="table">
<tbody>
<div class="text-center">
<h4>Zuppe</h4></div>
<hr>
<tr>
<td class="sp1">Nr. 121</td>
<td class="sp2">Minestrone</td>
<td class="sp3">Suppe mit geschlagenem Ei</td>
<td class="sp4">7,00€</td>
</tr>
<tr>
<td class="sp1">Nr. 122</td>
<td class="sp2">Stracciatella </td>
<td class="sp3">Fischsuppe</td>
<td class="sp4">7,00€</td>
</tr>
<tr>
<td class="sp1">Nr. 123</td>
<td class="sp2">Zuppa chipolla</td>
<td class="sp3">Zwiebelsuppe</td>
<td class="sp4">7,00€</td>
</tr>
<tr>
<td class="sp1">Nr. 125</td>
<td class="sp2">Tomatencremesuppe </td>
<td class="sp3"></td>
<td class="sp4">7,50€</td>
</tr>
</tbody>
</table>
<hr>
<table class="table">
<tbody>
<div class="text-center">
<h4>Insalate</h4></div>
<hr>
<tr>
<td class="sp1">Nr.86</td>
<td class="sp2">Tomate Uno</td>
<td class="sp2">Tomaten und Zwiebel </td>
<td class="sp4">8,00€</td>
</tr>
<tr>
<td class="sp1">Nr. 88</td>
<td class="sp2">Insalata Italiana</td>
<td class="sp2">Mit Thunfisch,Gurken, Tomaten, Ei, Paprika und Oliven</td>
<td class="sp4">9,50€</td>
</tr>
<tr>
<td class="sp1">Nr. 90</td>
<td class="sp2">Insalata Sicilia</td>
<td class="sp2">mit Schinken,Gurkrn, Tomaten,Thunfisch, Zwiebeln und Käse</td>
<td class="sp4">9,50€</td>
</tr>
<tr>
<td class="sp1">Nr. 92</td>
<td class="sp2">Insalata Mista</td>
<td class="sp2">Mais, Paprika, Gurken, Karotten, Zwiebeln und Tomaten</td>
<td class="sp4">9,00€</td>
</tr>
<tr>
<td class="sp1">Nr. 93</td>
<td class="sp2">Insalata Fantasia</td>
<td class="sp2">Mit Morzzarella Ei, Krabben,Thunfiscch und Tomaten</td>
<td class="sp4">10,50€</td>
</tr>
<tr>
<td class="sp1">Nr. 94</td>
<td class="sp2">Insalata con Tacchino</td>
<td class="sp2">Mit Putenstreifen, Mais, Karotten, Gurken, Oliven, Schafskäse und Buschetta</td>
<td class="sp4">13,50€</td>
</tr>
</tbody>
</table>
Alles anzeigen
und noch ein Bildchen
Die Abstände von Zuppe sind ok. Die Beschreibung könnte mehr Plat belegen.
Unter " Insalata sind die Abstände insgesamt zu groß