HTML-таблица всего один столбец в Chrome

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, но она отлично работает в Edge и даже в IE. Я не тестировал его с Firefox, потому что он не установлен, но никто не сказал ничего о любом браузере, кроме Chrome.

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

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

Answer 1

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

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