stackoom
  简体   繁体   中英

HTML Table Alignment

 原文  2014-02-26 16:23:34  1   1    html/ css/ html-table

Question

I am not a professional with this by any means.

I have the following table, and need to get the column headers to align with the rest of the table... Any help would be greatly appreciated!

I want to have a scrollable, sortable table that can display the given stats for players. 

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
  <script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
  <style>
    /* Appearance */
    body, table { font-family: sans-serif; }
    table { border-collapse: collapse; }
    td, th { padding: 6px; }
    th { background: #6699CC; color: white; }
    tbody tr:nth-child(odd) { background: #dfdfdf; }
    table { border: 1px solid black; }

    /* Scrollability of table */
    table { width: 890px; } /* fixed width table */
    thead tr { display: block; } /* makes it sizeable */
    tbody { 
      display: block; /* makes it sizeable */
      height: 180px; /* height of scrollable area */
      overflow: auto; /* scroll rather than overflow */
      width: 100%; /* fill the box */
    }
    thead th { width: 250px; } /* fixed width for THs */
    tbody td { width: 242px; } /* fixed width for TDs */
    /* the tbody needs to be 16px less than the thead, for the scrollbar */

  </style>
</head>
<body>

  <table class="sortable">
    <thead>
<tr>
<th>FIRST NAME</th>
<th>LAST NAME</th>
<th>YEARS</th>
<th>GAMES</th>
<th>GPY</th>
<th>POINTS</th>
<th>PPG</th>
<th>REBOUNDS</th>
<th>RPG</th>
<th>ASSISTS</th>
<th>APG</th>
<th>STEALS</th>
<th>SPG</th>
<th>BLOCKS</th>
<th>BPG</th>
<th>3's</th>
<th>3PG</th>
<th>FT's</th>
<th>FTPG</th>
<th>CHARGES</th>
<th>CPG</th>
</thead>
    <tbody>



<tr><td align="center"><font size="2">  Josh    </td><td align="center"><font size="2"> Bailey  </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 3   </td><td align="center"><font size="2"> 3.0 </td><td align="center"><font size="2"> 3   </td><td align="center"><font size="2"> 1.0 </td><td align="center"><font size="2"> 6   </td><td align="center"><font size="2"> 2.0 </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 0.3 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 0.3 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0
<tr><td align="center"><font size="2">  Abraham </td><td align="center"><font size="2"> Barron  </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 24  </td><td align="center"><font size="2"> 24.0    </td><td align="center"><font size="2"> 33  </td><td align="center"><font size="2"> 1.4 </td><td align="center"><font size="2"> 70  </td><td align="center"><font size="2"> 2.9 </td><td align="center"><font size="2"> 3   </td><td align="center"><font size="2"> 0.1 </td><td align="center"><font size="2"> 7   </td><td align="center"><font size="2"> 0.3 </td><td align="center"><font size="2"> 5   </td><td align="center"><font size="2"> 0.2 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 11  </td><td align="center"><font size="2"> 0.5 </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 0.0
<tr><td align="center"><font size="2">  Ryan    </td><td align="center"><font size="2"> Boltz   </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 27  </td><td align="center"><font size="2"> 27.0    </td><td align="center"><font size="2"> 59  </td><td align="center"><font size="2"> 2.2 </td><td align="center"><font size="2"> 70  </td><td align="center"><font size="2"> 2.6 </td><td align="center"><font size="2"> 9   </td><td align="center"><font size="2"> 0.3 </td><td align="center"><font size="2"> 16  </td><td align="center"><font size="2"> 0.6 </td><td align="center"><font size="2"> 8   </td><td align="center"><font size="2"> 0.3 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 5   </td><td align="center"><font size="2"> 0.2 </td><td align="center"><font size="2"> 4   </td><td align="center"><font size="2"> 0.1
<tr><td align="center"><font size="2">  William </td><td align="center"><font size="2"> Boseman </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 6   </td><td align="center"><font size="2"> 6.0 </td><td align="center"><font size="2"> 29  </td><td align="center"><font size="2"> 4.8 </td><td align="center"><font size="2"> 21  </td><td align="center"><font size="2"> 3.5 </td><td align="center"><font size="2"> 3   </td><td align="center"><font size="2"> 0.5 </td><td align="center"><font size="2"> 6   </td><td align="center"><font size="2"> 1.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 0.2 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0
<tr><td align="center"><font size="2">  Ian </td><td align="center"><font size="2"> Bosley  </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 17  </td><td align="center"><font size="2"> 17.0    </td><td align="center"><font size="2"> 148 </td><td align="center"><font size="2"> 8.7 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0
<tr><td align="center"><font size="2">  Ricardo </td><td align="center"><font size="2"> Bullock </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 24  </td><td align="center"><font size="2"> 24.0    </td><td align="center"><font size="2"> 121 </td><td align="center"><font size="2"> 5.0 </td><td align="center"><font size="2"> 150 </td><td align="center"><font size="2"> 6.3 </td><td align="center"><font size="2"> 7   </td><td align="center"><font size="2"> 0.3 </td><td align="center"><font size="2"> 10  </td><td align="center"><font size="2"> 0.4 </td><td align="center"><font size="2"> 83  </td><td align="center"><font size="2"> 3.5 </td><td align="center"><font size="2"> 2   </td><td align="center"><font size="2"> 0.1 </td><td align="center"><font size="2"> 25  </td><td align="center"><font size="2"> 1.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0
<tr><td align="center"><font size="2">  Cody    </td><td align="center"><font size="2"> Burkhardt   </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 6   </td><td align="center"><font size="2"> 6.0 </td><td align="center"><font size="2"> 13  </td><td align="center"><font size="2"> 2.2 </td><td align="center"><font size="2"> 10  </td><td align="center"><font size="2"> 1.7 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 0.2 </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 0.2 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 0.2 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0
<tr><td align="center"><font size="2">  Tony    </td><td align="center"><font size="2"> Byrd    </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 3   </td><td align="center"><font size="2"> 3.0 </td><td align="center"><font size="2"> 10  </td><td align="center"><font size="2"> 3.3 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0
<tr><td align="center"><font size="2">  Cedric  </td><td align="center"><font size="2"> Cash    </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 17  </td><td align="center"><font size="2"> 17.0    </td><td align="center"><font size="2"> 89  </td><td align="center"><font size="2"> 5.2 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0
<tr><td align="center"><font size="2">  Rashad  </td><td align="center"><font size="2"> Chavis  </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 6   </td><td align="center"><font size="2"> 6.0 </td><td align="center"><font size="2"> 134 </td><td align="center"><font size="2"> 22.3    </td><td align="center"><font size="2"> 42  </td><td align="center"><font size="2"> 7.0 </td><td align="center"><font size="2"> 21  </td><td align="center"><font size="2"> 3.5 </td><td align="center"><font size="2"> 30  </td><td align="center"><font size="2"> 5.0 </td><td align="center"><font size="2"> 15  </td><td align="center"><font size="2"> 2.5 </td><td align="center"><font size="2"> 1   </td><td align="center"><font size="2"> 0.2 </td><td align="center"><font size="2"> 13  </td><td align="center"><font size="2"> 2.2 </td><td align="center"><font size="2"> 0   </td><td align="center"><font size="2"> 0.0
<tr><td align="center"><font size="2">  Zack    </td><td align="center"><font size="2"> Cooper  </td><td align="center"><font size="2"> 2   </td><td align="center"><font size="2"> 30  </td><td align="center"><font size="2"> 15.0    </td><td align="center"><font size="2"> 151 </td><td align="center"><font size="2"> 5.0 </td><td align="center"><font size="2"> 118 </td><td align="center"><font size="2"> 3.9 </td><td align="center"><font size="2"> 50  </td><td align="center"><font size="2"> 1.7 </td><td align="center"><font size="2"> 45  </td><td align="center"><font size="2"> 1.5 </td><td align="center"><font size="2"> 13  </td><td align="center"><font size="2"> 0.4 </td><td align="center"><font size="2"> 20  </td><td align="center"><font size="2"> 0.7 </td><td align="center"><font size="2"> 27  </td><td align="center"><font size="2"> 0.9 </td><td align="center"><font size="2"> 5   </td><td align="center"><font size="2"> 0.2



    </tbody>
  </table>


</body>
</html>

1 answers

solution1
 1  2014-02-26 16:42:40

Remove your <thead> tags from table, remove 

thead th { width: 250px; } /* fixed width for THs */
tbody td { width: 242px; } /* fixed width for TDs */

from styling, close all your <tr> s. Move your opening <tbody> tag to the removed opening <thead> 's place.

Example

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question HTML table headers alignment HTML table with alignment problems HTML table td alignment multiple table alignment in html HTML Table Alignment Issue HTML table content alignment HTML - Table Content Alignment alignment issue with html table HTML / IOS < 6 Table Alignment Table alignment issue html
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM