HTML-таблица с одной колонкой в ​​хроме

Question

Итак, я недавно взял на себя управление сайтом для нашего клуба робототехники. У меня больше всего опыта в веб-разработке в комнате, хотя я не использовал его в то время, поэтому я немного ржавчивый по некоторым неясным деталям и тому подобное.

Я пытался убежать и удалить ненужный мусор, созданный веб-сайтом, который использовался/оставлен, и я столкнулся с проблемой, с которой он сталкивался, что никто не мог понять.

Он пытался отформатировать некоторую информацию о конкурсе наших школьных хостов в таблице данных, которую можно увидеть здесь (я размещаю раздел и весь другой контент в этом разделе, включая таблицу, в случае, если это любое использование):

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

вопрос, который он наткнулся на это таблица не форматировать должным образом в Chrome, но он отлично работает в Крае и даже IE. Не тестировали его с Firefox, потому что он не установлен, но никто ничего не сказал о каком-либо браузере, кроме хром.

Стол, расположенный в хромированном виде, отображается вверх и вниз, один столбец. Данные все еще находятся в правильном порядке, но не в порядке. Я бы предположил, что это проблема, с которой раньше сталкивался кто-то другой, но у меня ее нет, и я не мог найти хорошую должность, которая рассматривала бы эту проблему.

Может ли кто-нибудь помочь мне?

Answer 1

У вас есть display: block;, прикрепленный к вашему td на вашем сайте. Это приводит к тому, что td ведет себя как элемент блока вместо display: table-cell. Удалите это, и элементы td будут вести себя так, как ожидалось.

В частности, похоже, что это строка 104 в вашей таблице стилей под названием «style.css».