CODEWITHSUNDEEP
htmlcsshtml-table
ashura91
ashura91

Reputation: 441

How to make scrollable div inside a <td>?

I have this nested table. In one of the <td> I'd like to have a scrollable div.

<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;" border'1px'>
  <thead>
    <tr>
      <th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
      <th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
      <th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
    </tr>                     	
  </thead>
  <tbody>
    <tr style="padding:0px;">
      <td colspan='2' style="padding:0px;">COLUMN 1</td>
      <td style="padding:0px;">
        <div style='width:800px;overflow-x:scroll;'>This DIV should have a large width</div></td>
    </tr>
  </tbody>
</table>

When I insert 800px as the div width, it is displayed correctly. But, If I insert 1000px the display output is broken. Ideally, I need it up to 5000px++.

Upvotes: 3

Views: 1511

Answers (2)

DeltaMarine101
DeltaMarine101

Reputation: 753

I'm not sure if this is what you wanted. This will keep your requested 5000+px width all the time, while inside a smaller scrollable div. (btw overflow-x: auto; means that it will only show the scrollbar when the content is actually overflowing rather than all the time)

<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;" border'1px'>
  <thead>
    <tr>
      <th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
      <th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
      <th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
    </tr>                     	
  </thead>
  <tbody>
    <tr style="padding:0px;">
      <td colspan='2' style="padding:0px;">COLUMN 1</td>
      <td style="padding:0px;">
        <div style='width:800px;overflow-x:auto;'>
          <div style='width:5000px;'>This DIV should have a large width</div>
        </div></td>
    </tr>
  </tbody>
</table>

I hope this helps :)

Upvotes: 5

Clint_A
Clint_A

Reputation: 536

I think you need to have your width as 25% and 75% since in your <thead> the first two columns account for 25% and the third 75%. So your translate the same to the <tbody>

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
</head>

<body>
  <table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;">
  <thead>
    <tr>
      <th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
      <th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
      <th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
    </tr>
  </thead>
  <tbody>
    <tr style="padding:0px;">
      <td colspan='2' style="padding:0px;width:25% !important;">COLUMN 1</td>
      <td style="padding:0px;">
        <div style='width:75% !important;overflow-x:scroll;position:relative;'>This DIV should have a large width</div>
      </td>
    </tr>
  </tbody>
  </table>
</body>
</html>

Upvotes: 0

Related Questions