1

Both the gray background row and the white background row below are two separate tables. The white background table is the 'overflow-y' property set to scrollable is the number of elements within it exceeds 100px.

enter image description here

CSS for tables:

table {
border-collapse: collapse;
width: 100%;
}

HTML for gray table:

     <div style="padding-bottom: 2px">
         <table>
               <thead>
                   <tr>
                       <th>Start Time</th>
                       <th>End Time</th>
                       <th>User1</th>
                       <th>User2</th>
                       <th></th>
                   </tr>
              </thead>
        </table>
    </div>

CSS for gray table:

th {
    background-color: #E0E0E0;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 0px 8px 0px;
    text-align: left;
    vertical-align: bottom;
    width: 20%;
}

HTML for white table:

      <div style="height:95%;overflow:auto">
            <table id="modalTable" style="table-layout: fixed; width: 100%" >
               <tbody>
                    <tr ng-repeat-start="value in MaintenanceModeEvents" class="event">
                        <td>{{'Start Time: MM-dd-yyyy HH:mm:ss'}}</td>
                        <td>{{'End Time: MM-dd-yyyy HH:mm:ss'}}</td>
                        <td>{{'User 1'}}</td>
                        <td>{{'User 2'}}</td>
                        <td><button type="button"</td>
                    </tr>
                </tbody>
            </table>
       </div>

CSS for white table:

tr.event {
    border-top: 1px solid #808080;
    /*border-bottom: 1px solid #808080;*/
    font-size: 14px;
    padding: 8px 16px;
    text-align: left;
}

The header of the gray background table is evenly spaced at 20% (there is a th with nothing in it above view comments) when the white background table's contents doesn't exceed 100px. The issue that I am running into is when the white background table's contents exceeds 100px, the scroll bar's width takes up space in the white background table and the headers from the gray background table no longer align with the white background table as seen above. How can I handle this issue? Any help would be great!

SQL and Java Learner
  • 671
  • 2
  • 6
  • 18
  • Could you add your code please – sol Jul 05 '17 at 15:47
  • code please, if you don't provide the code is hard to inspect – Yuri Pereira Jul 05 '17 at 15:54
  • Why not just 1 table? – Petroff Jul 05 '17 at 16:03
  • I need the gray header to stay in place when scrolling through the second table. I was having issues with attaching the header to the same table as the body. Currently it exists within a separate div so when I scroll it stays at the top of the page. – SQL and Java Learner Jul 05 '17 at 16:05
  • It's overkill, but if you don't find something better you can try to calculate the titles table width by removing scroller width. Here is an article how to do it: https://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript – Petroff Jul 05 '17 at 16:15

0 Answers0