Zelle zu Tabelle hinzugefügt! kann das Ergebnis nicht verstehen

Emess

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">&times;</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

lecker1.jpeg

Die Abstände von Zuppe sind ok. Die Beschreibung könnte mehr Plat belegen.

Unter " Insalata sind die Abstände insgesamt zu groß

m.scatello

Vielleicht erst einmal den HTML-Code sauber machen?

Das

Code

<div class="text-center">
    <h4>Zuppe</h4>
</div>
<hr>

gehört nicht in eine Tabelle.

Emess

Das kann ich machen. Aber das ist nicht das Problem. Oder?

Wenn doch! Kannst du das näher erklären.?

Wenn es aber nur Kosmetik ist, mache ich mir anschließend Gedanken.

m.scatello

Zitat von Emess

mache ich mir anschließend Gedanken.

Warum nicht sofort? Ich glaube zwar nicht, dass dies das Problem lösen wird, aber wenn man auf defekten HTML-Code hingewiesen wird, sollte man dies auch korrigieren.

Ist die Seite online? Wenn ja, post mal einen Link.

m.scatello

1.Tabelle

Code

<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>

2. Tabelle

Code

<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>

Fällt dir was auf?

Emess

Tschuldiggung mein Fehler,

https://my2.emess62.de/

Das gebastel ist hier online- Und da unter ausfühliche Speisekarte

Emess

Zitat von m.scatello

1.Tabelle

Code

<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>

2. Tabelle

Code

<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>

Fällt dir was auf?

noch nicht aber ich gehe jetzt bit für bit durch

Emess

Ok! das wird es wohl sein.

m.scatello

Du solltest die Seite auch mal mit https://validator.w3.org/ checken

Emess

Deshalb will ich ja selbst so nach und nach von Bootstrap weg und so langsam Pures HTML5 und CSS mit Flexbox nutzen.

Da bin ich aber erst noch am lernen.

Sempervivum

Bei so etwas offenbaren sich die Vorteile von Gridlayout: Kein zusätzlichen Container und Klassen, nur die Elemente aneinander gereiht und dann dieses CSS:

Code

        div.modal-body div.grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr 6fr 1fr;
        }

Und das Umschalten auf vertikale Anordnung ist kinderleicht:

Code

            div.modal-body div.grid-container {
                grid-template-columns: 1fr;
            }

Aber auch bei der jetzigen Lösung mit Tabellen könntest Du es vereinfachen und auf die Klassen verzichten, wenn Du nth-of-type verwendest:

:nth-of-type | CSS-Tricks

The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level

css-tricks.com

Emess

Das Problem wurde ja von m.scatello erfolgreich erkannt. Vielen Dank.

Die Sache mit dem grid anstatt table finde ich sehr interessant. und eröffne einen neuen Thread

Zelle zu Tabelle hinzugefügt! kann das Ergebnis nicht verstehen

Jetzt mitmachen!

Tags