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行名为＆＃34; style.css＆＃34;。

HTML表格中的所有一列都是Chrome

1 个答案: