Содержание блока сжимается игнорируя overflow auto

289

08 декабря 2017, 02:52

Доброго времени! Есть у меня конструкция блоков с таблицей внтури, при том таблица больше чем родительские блоки, с помощью 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 к примеру, подскажите что я сделал не так?

Answer 1

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

Answer 2

Просто измените в таблице 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>

Answer 3

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

Answer 4

Тег 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>