CODEWITHSUNDEEP
htmlcss
user1937021
user1937021

Reputation: 10801

Columns not lining up HTML table

I have the following table in HTML, but the columns don't line up at all well, you can see it here:

http://purepremier.com/#/teams

Is there any reason why this might be?

  <table class="league">
        <thead>
          <tr>
            <th>Pos</th>
            <th>Team</th>
            <th>P</th>
            <th>F</th>
            <th>A</th>
            <th>GD</th>
            <th>Pts</th>
          </tr>
        </thead>
        <tbody>
            <td class="ng-binding">1</td>
            <td class="teams">
                <a href="#/teams/65" ng-click="hidePrefs()" class="ng-binding">
                  Manchester City 
                </a>
            </td>
            <td class="ng-binding">4</td>
            <td class="ng-binding">10</td>
            <td class="ng-binding">0</td>
            <td class="ng-binding">10</td>
            <td class="ng-binding">12</td>
          </tr> 
    <tr ng-repeat="team in teamsList.standing" class="ng-scope">
            <td class="ng-binding">2</td>

            <td class="teams">
                <a href="#/teams/354" ng-click="hidePrefs()" class="ng-binding">
                  Crystal Palace 
                </a>
            </td>
            <td class="ng-binding">4</td>
            <td class="ng-binding">8</td>
            <td class="ng-binding">5</td>
            <td class="ng-binding">3</td>
            <td class="ng-binding">9</td>
          </tr>
............
        </tbody>
      </table>

Upvotes: 0

Views: 2173

Answers (1)

Web pundit
Web pundit

Reputation: 498

The below should fix the issue

In app.css line 921 change the display:inline-block; to display:table-cell;

display:table-cell; is the default behaviour of the <td> element

Upvotes: 1

Related Questions