HTML table chrome 中的所有一列

Question

所以，我最近接管了我们机器人俱乐部的网站管理工作。我在房间里对网络开发的经验最多，虽然我有一段时间没有使用它，所以我对一些晦涩的细节和东西有点生疏。

我一直在尝试运行清除网站创建者 used/left 中所有不必要的垃圾，但我遇到了他遇到的一个问题，没人能弄清楚出。

他试图在数据 table 中格式化关于我们学校举办的比赛的一些信息，可以在这里看到（我正在 post 编辑该部分和其中的所有其他内容部分，包括 table，以防它有任何用处）：

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

他遇到的问题是 table 在 Chrome 中的格式不正确，但在 Edge 甚至 IE 中都可以正常工作。还没有用 Firefox 测试它，因为它没有安装，但是没有人对 chrome.

以外的任何浏览器发表任何评论

chrome 中的 table 显示为直上直下，一列 table。数据仍然按正确的顺序排列，但不是排列。我想这是其他人以前遇到过的问题，但我没有也找不到解决此问题的好方法 post。

谁能帮帮我？

Answer 1

您有 display: block; 附加到您网站上的 td。这导致 td 表现为块元素而不是 display: table-cell。删除它，td 元素将按预期运行。

具体来说，它看起来像是您名为 "style.css".

的样式表中的第 104 行

HTML table chrome 中的所有一列

HTML table all one column in chrome

html

google-chrome

html-table

tablerow