Как сделать прокручиваемый div внутри <td>? - PullRequest
Новая
       0

Как сделать прокручиваемый div внутри <td>?

0 голосов
/ 28 сентября 2018

У меня есть эта вложенная таблица.В одном из <td> я хотел бы иметь прокручиваемый 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>

Когда я вставляю 800px в качестве ширины div, она отображается правильно.Но если я вставлю 1000px, вывод на дисплей будет прерван.В идеале мне нужно до 5000px ++.

Ответы [ 2 ]

0 голосов
/ 28 сентября 2018

Я не уверен, что это то, что вы хотели.Это будет поддерживать запрошенную ширину 5000 + px все время, пока внутри меньшего прокручиваемого div.(кстати, переполнение-x: авто; означает, что оно будет показывать полосу прокрутки только тогда, когда содержимое фактически переполняется, а не постоянно) 

<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>

Надеюсь, это поможет:)

0 голосов
/ 28 сентября 2018

Я думаю, вам нужно иметь ширину 25% и 75%, поскольку в ваших <thead> первые два столбца составляют 25%, а третий - 75%.Так что вы переводите то же самое на <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...