Сделайте вложенную таблицу с автоматическим макетом таблицы, ширина переполнения 100%, когда окно слишком маленькое - PullRequest
Новая
       22

Сделайте вложенную таблицу с автоматическим макетом таблицы, ширина переполнения 100%, когда окно слишком маленькое

0 голосов
/ 10 декабря 2018

У меня есть таблица с table-layout: auto, которой я хочу дать ширину 100%, но я хочу, чтобы она переполнялась горизонтально, когда ширина окна ниже минимального пространства, необходимого для полного отображения его содержимого, без того, чтобы это вызываловместо этого горизонтальная полоса прокрутки окна.

См. эти примеры:

ПРИМЕР 1 (работает) 

<div style="width: 100%; overflow-x: auto">
  <table style="table-layout: auto; width: 100%; overflow-x:auto; border: 1px solid black">
    <tr>
      <td>dcsdcsdcasd1</td>
      <td>dcsdcsdd2</td>
      <td>dcsdcsdasxascasd3</td>
      <td>dcsdcsdasd4</td>
      <td>dcsdcsdxasacasd5</td>
      <td>dcsdcsdcxasd6</td>
      <td>dcsdcsxaxasdcasd7</td>
      <td>dcsdasd8</td>
      <td>dcsdd9</td>
      <td>dcsdxaxasxascsdcasd10</td>
    </tr>
  </table>
</div>

ПРИМЕР 2 (не работает) 

    <table>
      <tr>
        <td>
          <div style="width: 100%; overflow-x: auto">
            <table style="table-layout: auto; width: 100%; overflow-x:auto; border: 1px solid black">
              <tr>
                <td>dcsdcsdcasd1</td>
                <td>dcsdcsdd2</td>
                <td>dcsdcsdasxascasd3</td>
                <td>dcsdcsdasd4</td>
                <td>dcsdcsdxasacasd5</td>
                <td>dcsdcsdcxasd6</td>
                <td>dcsdcsxaxasdcasd7</td>
                <td>dcsdasd8</td>
                <td>dcsdd9</td>
                <td>dcsdxaxasxascsdcasd10</td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
    </table>

Когда размер окна изменяется и опускается ниже ширины, необходимой для полного отображения содержимого, ширина внутренней таблицы в примере 2 остается фиксированной, а горизонтальная полоса прокрутки отображается длявсе окноЭтого не происходит в примере 1, где результат является именно желаемым.Проблема заключается в таблице переноса в примере 2. Однако в моем реальном проекте, где мне нужно было бы выполнить эту работу, у меня есть эта таблица переноса вокруг моего HTML-кода, и я не могу ее удалить.Во всяком случае, я не могу понять, почему упаковочный стол должен иметь какое-либо значение в этом отношении.

Есть ли какие-либо предложения, чтобы сделать эту работу, как предполагалось, даже при наличии внешнего стола?

1 Ответ

0 голосов
/ 11 декабря 2018

Ваша внешняя таблица во втором примере по-прежнему растет настолько, насколько этого требует ее содержимое, и именно поэтому вы получаете полосу прокрутки для всего документа.

Для начала необходимо ограничить ширину этой таблицы,width: 100%; table-layout: fixed; - так что он может переполниться, когда внутренняя таблица внутри него станет шире.

...