Таблица не расширяется на всю ширину div? - PullRequest
0 голосов
/ 30 ноября 2018

У меня есть таблица, завернутая в div, которую нужно прокручивать горизонтально на экранах мобильных устройств.У меня эта часть работает, но по какой-то причине в правой части таблицы у меня есть пустая область, из-за которой таблица не распространяется на всю ширину div-оболочки.Firefox сообщает, что таблица имеет правильную ширину в пикселях, но она расширяется не так, как положено.

.m-portlet__body {
  padding: 0;
  position: relative;
}

.m-form {
  overflow: auto;
  min-width: 500px;
}

.table {
  table-layout: fixed;
}
<div class="m-portlet__body">
  <form name="user_notification">
    <table class="table">
      <thead>
        <tr>
          <th></th>
          <th>A</th>
          <th>B</th>
          <th>C</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
        </tr>
        <tr>
          <td>a</td>
        </tr>
        <tr>
          <td>b</td>
        </tr>
        <tr>
          <td>c</td>
        </tr>
      </tbody>
    </table>
  </form>
</div>

Пример пробела:

Blank Space

Заявленная ширина оболочки:

Wrapper Width

Сообщаемая ширина таблицы:

Table Width

Обновление с шириной таблицы, установленной на100%: enter image description here

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

Вот что я в итоге сделал:

CSS:

 .m-portlet__body{
    padding: 0;
    position: relative;
    height: 500px;
 }
 .m-form{
    top: 0;
    left: 0;
    overflow: scroll;
    min-width: 600px;
    position: absolute;
 }
 .table{
    table-layout: fixed;
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
    th:first-child{
        width: 350px;
    }
    th{
        width: 100px;
    }

    td{
        width: 100px;
    }
 }

HTML остался без изменений.

Я до сих пор не знаю, ПОЧЕМУ он работает не у всехеще (и я, в коде) сообщил.Я проверил каждый родительский элемент и удалил что-то необычное, удалив его.Это отлично работает, все еще странно до конца.

0 голосов
/ 30 ноября 2018

Вы пытались применить 100% с к столбцам таблицы?

Иногда было бы проще устранить неполадки, если бы вы могли подготовить демонстрацию на #jsfiddle или # Codepen.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...