HTML-Tabelle alle eine Spalte in Chrom

Question

So übernahm ich vor kurzem die Verwaltung der Website für unseren Robotik-Club. Ich habe die meiste Erfahrung in Web-Entwicklung im Raum, obwohl ich es seit einer Weile nicht verwendet habe, also bin ich ein bisschen rostig auf einige der obskuren Details und Sachen.

Ich habe versucht, alle unnötigen Müll durch den Schöpfer der Website verwendet/links rein und entfernen, und ich stieß auf ein Problem, das er hatte, was niemand herausfinden konnte.

Er hat versucht, einige Informationen über den Wettbewerb unserer Schule in einer Datentabelle zu formatieren, die hier zu sehen ist (ich poste den Abschnitt und alle anderen Inhalte in diesem Abschnitt, einschließlich der Tabelle, falls ja missbräuchlichen Nutzung):

<section id="news" class="container content-section trans-section text-center" style="position: relative;padding-top: 55px;"> 
     <div class="row"><div class="col-md-offset-4 col-md-4"><h2 class="text-center">Additional Updates & Information</h2><br><div class="line"></div></div></div> 
     <br><br><br> 
     <div class="row text-left" style="padding-left: 80px;"> 
      <div class="col-md-11"> 
       <h2 class="text-left">Updates</h2> 
       <div class="line-alt"></div> 
       <div class="row"> 
        <ul style="font-size: 1.6em; font-family: 'Lato'; font-weight: 300;"> 
         <li>The number of SweeperBot matches has been changed from 2 to 3.</li> 
         <li>SweeperBot matches will run in the morning. Each robot will run through the field once and then initial rankings will be posted. Each robot will then run a second time and rankings will be updated. Each robot will then go through a third and final time.</li> 
         <li>We are planning on a double elimination format for the SumoBots. Some of the early SumoBot matches will run in the morning concurrently with the SweeperBot matches.</li> 
         <li>We will release the schedule for the day as we get closer to the date and get a firmer handle on the total number of teams.</li> 
        </ul> 
       </div> 
       <br><br> 
       <table class="table table-striped table-bordered table-condensed" style="border: 1px solid #3c3c3c !important;"> 
        <caption style="align: top;">Schools Attending The Competition</caption> 
        <tr> 
         <td style="font-weight: 500;">School Name</td> 
         <td style="font-weight: 500;">Number of SumoBots</td> 
         <td style="font-weight: 500;">Number of SweeperBots</td> 
        </tr> 
        <tr> 
         <td>Bishop Shanahan High School</td> 
         <td class="success">3</td> 
         <td class="success">3</td> 
        </tr> 
        <tr> 
         <td>George School</td> 
         <td class="success">5</td> 
         <td class="success">3</td> 
        </tr> 
              <tr> 
         <td>Methacton High School</td> 
         <td class="success">4</td> 
         <td class="success">2</td> 
        </tr> 
        <tr> 
         <td>Pennridge High School</td> 
         <td class="success">4</td> 
         <td class="success">0</td> 
        </tr> 
        <tr> 
         <td>Plymouth Whitemarsh High School</td> 
         <td class="success">1</td> 
         <td class="success">1</td> 
        </tr> 
       </table> 
       <p style="font-family: 'Lato'; font-weight: 300;">*Actual number of robots subject to change as we approach April 16th.</p> 

      </div> 
     </div> 
    </section> 

das Problem, das er über gekommen ist die Tabelle nicht richtig in Chrome nicht formatiert werden, aber es funktioniert in Rand- und sogar IE in Ordnung. Ich habe es nicht mit Firefox getestet, weil es nicht installiert ist, aber niemand hat etwas über einen anderen Browser als Chrome gesagt.

Der Tisch, in Chrom, zeigt sich als eine gerade auf und ab, ein Säulentisch. Die Daten sind immer noch in der richtigen Reihenfolge, aber keine Anordnung. Ich könnte mir vorstellen, dass dies ein Problem ist, das jemand anderes zuvor erlebt hat, aber ich habe es nicht getan und ich konnte keinen guten Beitrag finden, der sich mit diesem Thema befasste.

Kann mir jemand helfen?

Answer 1

Sie haben display: block; an Ihre td auf Ihrer Website angeschlossen. Dies bewirkt, dass sich das td als Blockelement anstelle von display: table-cell verhält. Entfernen Sie das, und die td Elemente verhalten sich wie erwartet.

Insbesondere sieht es so aus, als wäre es Zeile 104 in Ihrem Stylesheet namens "style.css".