title: Material-UI table Row height to fixed height even content is lengthy in ReactJS
body: <p>I'm working with a listing component and I'm using material UI table in ReactJS. I've a ResumeUrl field in table which spans over to 3, 4 lines but I want to keep it only on 2 lines (fixed height for whole row) and show dots for rest of content. I'm unable to change height of Row. I've tried different ways. <a href="https://stackoverflow.com/a/50030823/11045088">This solution</a> isn't working for me as well.</p>
  <p>It will keep on increasing height if the content is going to be lengthy and lengthy. I want to set its fixed height, to get a nicer look and a good user experience.</p>
  <p><a href="https://i.stack.imgur.com/hDE7G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hDE7G.png" alt="enter image description here" /></a></p>
  <pre><code>    &lt;TableContainer&gt;
        &lt;Table
          className={classes.table}
          aria-labelledby=&quot;tableTitle&quot;
          size={dense ? 'small' : 'medium'}
          aria-label=&quot;enhanced table&quot;
          data={applicants}
        &gt;
          &lt;EnhancedTableHead
            classes={classes}
            order={order}
            orderBy={orderBy}
            onRequestSort={handleRequestSort}
            rowCount={rows.length}
          /&gt;
            &lt;TableBody&gt;
            {stableSort(rows, getComparator(order, orderBy))
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row, index) =&gt; {
                const labelId = `enhanced-table-checkbox-${index}`;
                return (
                  &lt;TableRow
                    style={{height: 10}}
                    hover
                    role=&quot;checkbox&quot;
                    tabIndex={-1}
                    key={row._id}
                  &gt;
                    &lt;TableCell style={{ height: 'auto !important' }} component=&quot;th&quot; id={labelId} scope=&quot;row&quot;&gt;{row.name}&lt;/TableCell&gt;
                    &lt;TableCell style={{ height: 'auto !important' }} align=&quot;left&quot;&gt;{row.address}&lt;/TableCell&gt;
                    &lt;TableCell style={{ height: 'auto !important' }} align=&quot;left&quot;&gt;{row.phone}&lt;/TableCell&gt;
                    &lt;TableCell style={{ height: 'auto !important' }} align=&quot;left&quot; style={{width: 350}}&gt;&lt;a href={row.resumeUrl}
                                                                    target={'_blank'}&gt;{row.resumeUrl}&lt;/a&gt;&lt;/TableCell&gt;
                    &lt;TableCell style={{ height: 'auto !important' }} align=&quot;left&quot;&gt;{row.email}&lt;/TableCell&gt;
                    &lt;TableCell style={{ height: 'auto !important' }} align=&quot;left&quot;&gt;{row.applied_date}&lt;/TableCell&gt;
                  &lt;/TableRow&gt;
                );
              })}
  
  
            {emptyRows &gt; 0 &amp;&amp; (
              &lt;TableRow
              style={{height: (dense ? 33 : 53) * emptyRows}}
              &gt;
              &lt;TableCell colSpan={6}/&gt;
              &lt;/TableRow&gt;
              )}
                &lt;/TableBody&gt;
              &lt;/Table&gt;
            &lt;/TableContainer&gt;
  </code></pre>