title: Scroll Material UI table body vertically
body: <p>I am using Material UI table for my React.js application. I want to scroll its body vertically if table is too long. Here is the table.</p>
  <pre><code>&lt;Table style={TableBorder}&gt;
                              &lt;colgroup&gt;
                                  &lt;col style={{width: '10%'}}/&gt;
                                  &lt;col style={{width: '30%'}}/&gt;
                                  &lt;col style={{width: '10%'}}/&gt;
                                  &lt;col style={{width: '10%'}}/&gt;
                                  &lt;col style={{width: '10%'}}/&gt;
                                  &lt;col style={{width: '10%'}}/&gt;
                                  &lt;col style={{width: '10%'}}/&gt;
                                  &lt;col style={{width: '10%'}}/&gt;
                              &lt;/colgroup&gt;
                              &lt;TableHead&gt;
                                  &lt;TableRow&gt;
                                      &lt;TableCell align=&quot;center&quot;
                                                 style={styles.table.tableHead.tableCell}&gt;PRODUCT&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;center&quot;
                                                 style={styles.table.tableHead.tableCell}&gt;BUILDS&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;right&quot;
                                                 style={styles.table.tableHead.tableCell}&gt;INSTRUCTIONS(%)&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;right&quot;
                                                 style={styles.table.tableHead.tableCell}&gt;BRANCHES(%)&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;right&quot;
                                                 style={styles.table.tableHead.tableCell}&gt;COMPLEXITY(%)&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;right&quot;
                                                 style={styles.table.tableHead.tableCell}&gt;LINES(%)&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;right&quot;
                                                 style={styles.table.tableHead.tableCell}&gt;METHODS(%)&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;right&quot;
                                                 style={styles.table.tableHead.tableCell}&gt;CLASSES(%)&lt;/TableCell&gt;
                                  &lt;/TableRow&gt;
                              &lt;/TableHead&gt;
                              &lt;TableBody&gt;
                                  {this.state.tableSummary.map((row, index) =&gt; (
                                      &lt;TableRow key={index}
                                                style={((row[1] &gt; 0) ? styles.table.tableBody.tableCell.cursorPointer : styles.table.tableBody.tableCell.cursorText)}
                                                hover&gt;
                                          &lt;TableCell component=&quot;th&quot; scope=&quot;row&quot;
                                                     align=&quot;left&quot;&gt;{row.name}&lt;/TableCell&gt;
                                          &lt;TableCell style={builds}
                                                     align=&quot;left&quot;&gt;{formatBuildString(row.build_no)}&lt;/TableCell&gt;
                                          &lt;TableCell
                                              align=&quot;right&quot;&gt;{getPercentage(row.data.totalIns, row.data.missIns)}&lt;/TableCell&gt;
                                          &lt;TableCell
                                              align=&quot;right&quot;&gt;{getPercentage(row.data.totalBranches, row.data.missBranches)}&lt;/TableCell&gt;
                                          &lt;TableCell
                                              align=&quot;right&quot;&gt;{getPercentage(row.data.totalCxty, row.data.missCxty)}&lt;/TableCell&gt;
                                          &lt;TableCell
                                              align=&quot;right&quot;&gt;{getPercentage(row.data.totalLines, row.data.missLines)}&lt;/TableCell&gt;
                                          &lt;TableCell
                                              align=&quot;right&quot;&gt;{getPercentage(row.data.totalMethods, row.data.missMethods)}&lt;/TableCell&gt;
                                          &lt;TableCell
                                              align=&quot;right&quot;&gt;{getPercentage(row.data.totalClasses, row.data.missClasses)}&lt;/TableCell&gt;
                                      &lt;/TableRow&gt;
                                  ))}
                              &lt;/TableBody&gt;
                          &lt;/Table&gt;
  </code></pre>
  <p>I used below styles to scroll table body vertically.</p>
  <pre><code>thead, tbody { display: block; }
  tbody {
     height: 100px;       /* Just for the demo          */
     overflow-y: auto;    /* Trigger vertical scroll    */
     overflow-x: hidden;  /* Hide the horizontal scroll */
  }
  </code></pre>
  <p>But when I use it my table is not aligned well.</p>