Отзывчивая таблица с минимальной шириной первого столбца; второй столбец растянуть; третий столбец всегда в конце; Как я могу это сделать? - PullRequest
Новая
       7

Отзывчивая таблица с минимальной шириной первого столбца; второй столбец растянуть; третий столбец всегда в конце; Как я могу это сделать?

0 голосов
/ 13 января 2020

Мне нужна таблица в html

В приведенном ниже макете показано, какие случаи следует охватить.

  1. Таблица не должна переполнять экран даже на небольших устройствах ( мобильная поддержка)
  2. Первый ряд должен быть как можно меньше (ширина); Наименьшая ширина - это ширина самого большого элемента в нем
  3. Второй столбец должен растягиваться на остальной части пространства
  4. Третий столбец должен быть всегда в конце и должен быть как можно меньше. (как в первом столбце)
  5. Высота строки должна быть динамической c
  6. Все ячейки строки должны быть в одной строке / иметь одинаковую высоту

Я уже пробовал это с flex и table

  • С table у меня была проблема, что второй столбец не был отзывчивым (фиксированная таблица) или переполнял экран потому что содержимое второго столбца было слишком большим и не сломалось и не сжалось
  • С flexbox я не получил первый столбец одинаковым с разной шириной, длина содержимого

Некоторые специальные предложения

  • Первый столбец должен содержать время, проблема в том, что 3:00 и 10:00 не имеют одинаковую ширину, я не хочу ширину stati c, потому что что будет тратить пространство или слишком мало для других locales
  • Второй столбец должен содержать элементы (div (пользовательский компонент, называемый чип)), которые могут сжиматься и ломаться, если им известна максимальная ширина
  • Третий столбец предназначен для действий - просто всегда на и ширину настолько малую, насколько это возможно, чтобы во втором столбце было достаточно места

Responsive table

Изменить 15/01/2020

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

Я уже нашел решение (ниже), но если у кого-то такой же результат без сетки - добро пожаловать!

Ответы [ 5 ]

1 голос
/ 13 января 2020

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

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

<table cellspacing="0">
  <tr>
    <th>Time column</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr> 
  <tr>
   <td>3:00</td>
    <td>Longer text for a longer column</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>11:00</td>
    <td>Longer text for a longer column</br>and a row break</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
   <td>06:00</td>
    <td><div>Here's a div containing a <span style="color: red;">span</span></div></td>
    <td><input type="checkbox"></td>
  </tr>
</table>

table, td, th {
  border: 1px solid white;
  background: orange;
}

table {
  width: 100%;
}

tr td:first-of-type, tr td:last-of-type { 
  width: 1px;
  text-align: center;
}

Этот codePen также стилизован, вы можете проверить отзывчивость таблицы, изменив размер окна: https://codepen.io/ialexandru/pen/mdyKqRX

1 голос
/ 13 января 2020

Если я правильно понял, вы можете попробовать это: 

<table class='table'>
  <thead>
    <th class='time'>time</th>
    <th class='text'>information</th>
    <th class='actions'>actions</th>
  </thead>
  <tbody>
    <tr>
      <td>04:00</td>
      <td>
          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit consequat dui, id lacinia est. Integer blandit, felis nec condimentum ornare, ex diam cursus leo, id rutrum dolor nibh vel libero. Integer ut augue semper, convallis libero id, finibus ipsum. Cras nec metus bibendum, dictum mi ut, ullamcorper lectus.           </span>
      </td>
      <td>
        <button>Action</button>
      </td>
    </tr>
  </tbody>
</table>


.table
  text-align: left
  width: 100%
  .time 
    min-width: 30px
    max-width: 50px
  .actions
    min-width: 80px //This value is a example

Вы можете проверить: https://codepen.io/AlissonRGalindo/pen/VwYdMRm

1 голос
/ 13 января 2020

Это html и css будут соответствовать вашим требованиям. Обратите внимание, что родитель div вокруг таблицы обязателен.

Обновление

  • Вы найдете JSFiddle на https://jsfiddle.net/uwpLrd1e/
  • <th> будет центрировать текст по умолчанию. Используйте text-align:left, чтобы выровнять его по левому краю.
  • Добавляйте отступы, цвета и границы, где бы вы ни находились sh.
  • Пожалуйста, используйте отступы (не поля), потому что поле будет превышать ширину.

. 

<div class="table-wrapper">
  <table>
    <tbody>
      <tr>
        <td>23:59</td>
        <td>Second column</td>
        <td>[]</td>
      </tr>
      <tr>
        <td>1:11</td>
        <td>Column 2 on row 2</td>
        <td>[X]</td>
      </tr>
    </tbody>
  </table>
</div>

/* table wrapper is required!! */
.table-wrapper {
  max-width: 100%;
}
.table-wrapper,
.table-wrapper * {
  box-sizing: border-box;
}
table, thead, tbody, tr {
  width: 100%;
}
table {
  max-width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  background-color: transparent;
}
th, td {
  vertical-align: top;
  border-left: 1px solid #ccc;
  line-height: 1;
  hyphens: auto;
  white-space: normal;
}
th:first-child,
td:first-child {
  border-left: 0;
}
/* stretch middle column (of three columns) */
th:nth-child(2),
td:nth-child(2) {
  width: 99.99%;
}
/* mobile support */
@media (max-width: 767.9px) {
  table {
    display: block;
    border: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  th, td {
    font-size: 95%;
  }
}
0 голосов
/ 14 января 2020

Окончательное решение:

CSS Сетка (поддержка 93,43%) 

.flex {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.item {
    margin-right: .6em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.my-grid {
    display: grid;
    grid-template-columns: max-content auto max-content;
    grid-gap: .6rem;
}
<div class="my-grid">

    <!-- first row -->
    <span>first column</span>
    <div class="flex">
        <div class="item">some div with very looooong content that truncate</div>
        <div class="item">some div with very looooong content that truncate</div>
    </div>
    <div>here some actions</div>

    <!-- second row -->
    <span>first column</span>
    <div class="flex">
        <div class="item">some div with very looooong content that truncate</div>
        <div class="item">some div with very looooong content that truncate</div>
    </div>
    <div>here some actions</div>

</div
0 голосов
/ 13 января 2020

Вы также можете ретранслировать на table-layout, установленном на auto (значение по умолчанию) и установить width на 0 для первого и последнего td, поэтому он будет расширяться только на ширину, необходимую для его содержания. середина td будет занимать все оставшееся пространство. для этого необходимо установить width в таблицу.

пример 

table {
  width: 100%;
  border: solid 1px;
  table-layout:auto;
}

th,td {
  border: solid 1px;
  padding: 0.25em
}

tr > :first-child,
tr > :last-child {
  width: 0 ; /* !! make sure table-layout is set to auto */
  /* white-space : nowrap; could be handy here */
}
<table>
  <tr>
    <td><input value="input"></td>
    <td> use room left</td>
    <td><input type="checkbox"></td>
  </tr>
</table>
<hr>
<table>
  <tr>
    <th>A.1</th>
    <td> use room left</td>
    <td>(....)</td>
  </tr>
  <tr>
    <th>A.2</th>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th>A.3</th>
    <td> use room left</td>
    <td>( / )</td>
  </tr>
</table>
<hr>
<p>to clear some question via a visual: </p>

<table>
  <tr>    
    <td>What if only 2 cells </td>
    <td> </td>
  </tr>
</table>
<hr>

<table>
  <tr>  
    <td> </td>  
    <td>What if only 2 cells </td>
  </tr>
</table>
<hr>

<table>
  <tr>    
    <td>What if only 1 cell</td>
  </tr>
</table>

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Свойство table-layou t CSS устанавливает алгоритм, используемый для размещать <table> ячеек, строк и столбцов.

auto

По умолчанию большинство браузеров используют автоматический c алгоритм компоновки таблицы. Ширина таблицы и ее ячеек настраивается в соответствии с содержимым.

...