0

Доброго времени! Есть у меня конструкция блоков с таблицей внтури, при том таблица больше чем родительские блоки, с помощью css настраиваю свойство overflow-x что бы таблица с содержимым прокручивалась влево-парво но по какой то причине таблица ужимается под блок не смотря на то что у всех ячеек проставлены размеры.

вот html (часть ячеек генерируется в цикле php)

<div style="width: 900px; display: block;">
     <div class="journalwrapblock">
                <div class="journalscrollblock">
                    <table border="1" min-width="1300">
                    <tr>
                    <td width="250"><b>Число</b></td>
                    <?php
                    for ($i = 1; $i <= 31; $i++) {
                    ?>
                    <td width="25" align="center"><?=$i;?></td>
                    <?php

                    }
                    ?>
                    </tr>
                    </table>
                </div>
            </div>
     </div>

и css

 .journalwrapblock {
  width: 100%;
  display: block;
  overflow-x: auto;
  }

  .journalscrollblock {
  display: block;
  }

по логике все должно работать однако на деле, просто ячейки таблицы вопреки установленным значениям сжимаются, например первая где width 250 cnfyjdbncz 197 к примеру, подскажите что я сделал не так?

4 ответа 4

1

Просто измените в таблице min-width на width. В таблицах min-width и max-width не поддерживаются.

Или попробуйте вообще отказаться от таблицы в пользу решения с инлайн-блоками:

#container {
  width: 500px;
  border: 1px solid red;
  overflow-x: auto;
}

#blockwrap {
  white-space: nowrap;
}

.item {
  width: 200px;
  height: 50px;
  border: 1px solid green;
  display: inline-block;
}
<div id="container">
   <div id="blockwrap">
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
   </div>
</div>

5
  • отелось бы вообще без width у тега table так как php генерирует количество ячеек то в дальнейшем может меняться и общая ширина таблицы)
    – dantelol
    6 дек 2017 в 10:18
  • вообще без width у table не получится, потому что ячейки, какой бы размер вы им не задали, будут ужиматься в ширину таблицы, а таблица - подстраиваться под размеры внешнего блока 6 дек 2017 в 10:25
  • @dantelol, вот Вам пример - jsfiddle.net/vfwy0a28 - там у первой ячейки размер 250px, а у второй - 50px (т.е. в сумме должно быть 300px), но поскольку у внешнего блока ширина 150px, они ужимаются до размера блока 6 дек 2017 в 10:28
  • мда а у ячеек можно поставить что то вроде no-wrap ?
    – dantelol
    6 дек 2017 в 10:37
  • @dantelol, так это ж не перенос )) они просто сжимаются. no-wrap можно задать строке с инлайн-блоками - попробуйте использовать такое решение (я добавил в ответ) 6 дек 2017 в 10:46
0

.journalscrollblock {
  width: 500px;
  overflow: auto;
  outline: 1px dotted red;
}

.journalscrollblock table {
  table-layout: fixed;
  width: fit-content;
}
<div style="width: 900px; display: block;">
  <div class="journalwrapblock">
    <div class="journalscrollblock">
      <table border="1" min-width="1300">
        <tr>
          <td width="250"><b>Число</b></td>
          <script>~function () {
            for (var $i = 1; $i <= 31; $i++) {
              document.write('<td width="25" align="center">' + $i + '</td>')
            }
          }()</script>
        </tr>
      </table>
    </div>
  </div>
</div>

0
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    body {
      width: 100%;
      height: 100%;
      min-height: 100vh;
      margin: 0;
      padding: 0;
    }
    td {
      border: 1px solid #ccc;
    }

    .mainblock {
      width: 100%;
      overflow: auto;
    }

    .journalwrapblock {
      min-width: 900px;
      display: block;
      overflow: auto;
    }

    .journalscrollblock {
      display: block;
    }

    table {
      min-width: 100%;
      min-height: 200px;
      overflow: auto;
      overflow: auto;
    }

    table tr td:first-child {
      width: 250px;
    }

    table tr td:last-child {
      width: 25px;
    }

  </style>
</head>
<body>
  <div class="mainblock">
    <div class="journalwrapblock">
      <div class="journalscrollblock">
        <table>
          <tr>
            <td><b>Число</b></td>
            <td></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</body>
</html>
0

Тег table не имеет атрибут min-width. Поэтому вынесите min-width в таблицу стилей.

.journalwrapblock {
  width: 100%;
  display: block;
  overflow-x: auto;
  }

  .journalscrollblock {
  display: block;
  }
  
table{ 
    min-width: 1300px;
table-layout: fixed;
}
<div style="width: 200px">
  <div class="journalwrapblock">
    <div class="journalscrollblock">
      <table border="1">
        <tr>
          <td width="250"><b>Число</b></td>
          <td>123213</td>
          <td>213123</td>
          <td>213213</td>

          <td>123213</td>
          <td>12312312</td>
          <td>123123</td>
          <td>12312312</td>
          <td width="25" align="center"></td>
           <td>123123</td>
          <td>12312312</td>

        </tr>
      </table>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.