NuffsaidM8 NuffsaidM8 - 2 months ago 8
HTML Question

HTML table all one column in chrome

So, I recently took over managing the website for our robotics club. I have the most experience in web development in the room, though I haven't used it in a while so I am a bit rusty on some of the obscure details and stuff.

I've been trying to run through and remove all the unnecessary garbage the creator of the website used/left in, and I came across an issue that he was having, which nobody could figure out.

He was trying to format some information about the competition our school hosts in a data table, which can be seen here (I am posting the section and all the other content in that section, including the table, in case it is of any use):

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


The issue that he came across is the the table does not format properly in Chrome, but it works fine in Edge and even IE. Haven't tested it with Firefox, because it is not installed, but nobody has said anything about any browser other than chrome.

The table, in chrome, shows up as a straight up and down, one columned table. The data is still in the proper order, but not arrangement. I would imagine that this is an issue someone else has experienced before, but I haven't and I couldn't find a good post that addressed this issue.

Can anyone help me out?

Answer

You have display: block; attached to your td on your site. This causes the td to behave as a block element instead of display: table-cell. Remove that, and the td elements will behave as expected.

Specifically, it looks like it is line 104 in your stylesheet named "style.css".