БЛОГ НА HUSL


Горизонтальная таблица в html-css

Автор вопроса: Титан

Почему-то нигде нет информации по запросу "горизонтальная таблица" – наткнулся на эту тему, и тот вариант мне почти подошёл:

table.horisontal tbody, table.horisontal thead {
        display:grid;
        grid-auto-flow: column
}

    table.horisontal tr {
        display: grid;
        grid-template-rows: 1fr;
        grid-auto-flow: row;
    }

    table.horisontal td {
        border: 1px solid white;
    }

Но мне нужно, чтобы выравнивание высоты ячеек происходило как в таблице – каждая строка имеет одинаковую высоту. Здесь же выравнивание есть, но оно идёт по всей "таблице", а не каждой отдельной строке, из-за чего получается как-то так: 2

Можно ли только средствами css сделать высоту всех ячеек строки одинаковыми? (С помощью js это очень просто делается, только вот зачем тратить лишние вычисления). csHtml вот:

    <table class="fa-flip-horizontal horisontal">
      
        <tbody>
        <tr>
            <td>Изображение</td>
            <td>Модель</td>
            <td>Bench</td>
            <td>Однопоточный тест</td>
            <td>Двухпоточный тест</td>
            <td>Четырёхпоточный тест</td>
            <td>Восьмипоточный тест</td>
            <td>64-х-поточный тест</td>
        </tr>
        @foreach (var CPU in Model)
        {
            Random r = new Random();
            <tr>
                <td class="HWtable-image">
                    <img src="../images/Hardware/CPU/@CPU.Id;.png" onError="this.src = '../images/Hardware/CPU/placeholder.png'" style="height:@r.Next(256)px"/>
                </td>
                <td><div>@CPU.ModelName</div></td>
                <td><div>@CPU.Cores2</div></td>
                <td><div>@CPU.Cores4</div></td>
                <td><div>@CPU.Cores8</div></td>
                <td><div>@CPU.Cores64</div></td>
            </tr>
        }
        </tbody>
    </table>

Можно изменить структуру html, но она должна оставаться такой, чтобы всегда можно было добавить ещё один столбец, не перезаписывая всю таблицу. Таблица должна быть прокручиваемой (по горизонтали). Я пытался "играться" с grid и flex, но самый удачный вариант вы можете видеть выше


Источник

Ответы (3 шт):

Автор решения: Stepan Chuev

попробуйте написать: tr{ height: значение; } если не помогло, пишите

→ Ссылка
Автор решения: webDev_ 

table.horisontal td {
  border: 1px solid white;
}
<table class="fa-flip-horizontal horisontal">
  <tbody>
    <tr>
      <td>Изображение</td>
      <td class="HWtable-image">
        <img src="#" style="height:@r.Next(256)px" />
      </td>
    </tr>
    <tr>
      <td>Модель</td>
      <td>
        <div>@CPU.ModelName</div>
      </td>
    </tr>
    <tr>
      <td>Bench</td>
    </tr>
    <tr>
      <td>Однопоточный тест</td>
      <td>
        <div>@CPU.Cores1</div>
      </td>
    </tr>
    <tr>
      <td>Двухпоточный тест</td>
      <td>
        <div>@CPU.Cores2</div>
      </td>
    </tr>
    <tr>
      <td>Четырёхпоточный тест</td>
      <td>
        <div>@CPU.Cores4</div>
      </td>
    </tr>
    <tr>
      <td>Восьмипоточный тест</td>
      <td>
        <div>@CPU.Cores8</div>
      </td>
    </tr>
    <tr>
      <td>64-х-поточный тест</td>
      <td>
        <div>@CPU.Cores64</div>
      </td>
    </tr>
  </tbody>
</table>

→ Ссылка
Автор решения: Qwertiy

В обоих способах если отдельный скролл не нужен, то контейнер надо просто убрать.

Способ с более хорошей браузерной поддержкой:

.table-wrapper {
  overflow: auto;
}

table {
  display: grid;
  grid-template-rows: repeat(var(--cols), auto);
  grid-auto-flow: column;
  border: solid;
  border-width: 1px 1px 0 0;
  width: fit-content;
}

thead, tbody, tr {
  display: contents;
}

td {
  border: solid;
  border-width: 0 0 1px 1px;
}

img {
  width: 200px;
  max-width: 20vw;
  height: 200px;
  max-height: 20vh;
  object-fit: contain;
}
<div class="table-wrapper">
  <table style="--cols: 8">
    <thead>
      <tr>
        <td>Изображение</td>
        <td>Модель</td>
        <td>Bench</td>
        <td>Однопоточный тест</td>
        <td>Двухпоточный тест</td>
        <td>Четырёхпоточный тест</td>
        <td>Восьмипоточный тест</td>
        <td>64-х-поточный тест</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><img src="https://placehold.co/600x400" /></td>
        <td><div>@CPU.ModelName</div></td>
        <td><div>@CPU.Bench</div></td>
        <td><div>@CPU.Cores1</div></td>
        <td><div>@CPU.Cores2</div></td>
        <td><div>@CPU.Cores4</div></td>
        <td><div>@CPU.Cores8</div></td>
        <td><div>@CPU.Cores64</div></td>
      </tr>
      <tr>
        <td><img src="https://placehold.co/400x600" /></td>
        <td><div>@CPU.ModelName</div></td>
        <td><div>@CPU.Bench<br>Ну подлиннее...</div></td>
        <td><div>@CPU.Cores1</div></td>
        <td><div>@CPU.Cores2<br>Ну подлиннее...</div></td>
        <td><div>@CPU.Cores4</div></td>
        <td><div>@CPU.Cores8</div></td>
        <td><div>@CPU.Cores64</div></td>
      </tr>
      <tr>
        <td><img src="https://placehold.co/400x400" /></td>
        <td><div>@CPU.ModelName</div></td>
        <td><div>@CPU.Bench</div></td>
        <td><div>@CPU.Cores1</div></td>
        <td><div>@CPU.Cores2</div></td>
        <td><div>@CPU.Cores4</div></td>
        <td><div>@CPU.Cores8</div></td>
        <td><div>@CPU.Cores64</div></td>
      </tr>
      <tr>
        <td><img src="https://placehold.co/400x400" /></td>
        <td><div>@CPU.ModelName</div></td>
        <td><div>@CPU.Bench</div></td>
        <td><div>@CPU.Cores1</div></td>
        <td><div>@CPU.Cores2</div></td>
        <td><div>@CPU.Cores4</div></td>
        <td><div>@CPU.Cores8</div></td>
        <td><div>@CPU.Cores64</div></td>
      </tr>
      <tr>
        <td><img src="https://placehold.co/400x400" /></td>
        <td><div>@CPU.ModelName</div></td>
        <td><div>@CPU.Bench</div></td>
        <td><div>@CPU.Cores1</div></td>
        <td><div>@CPU.Cores2</div></td>
        <td><div>@CPU.Cores4</div></td>
        <td><div>@CPU.Cores8</div></td>
        <td><div>@CPU.Cores64</div></td>
      </tr>
    </tbody>
  </table>
</div>

И более современный с менее хорошей (caniuse):

.table-wrapper {
  overflow: auto;
}

table {
  display: grid;
  grid-template-rows: repeat(10000, auto); /* большое число */
  border: solid;
  border-width: 1px 1px 0 0;
  width: fit-content;
}

thead, tbody {
  display: contents;
}

tr {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
}

td {
  border: solid;
  border-width: 0 0 1px 1px;
}

img {
  width: 200px;
  max-width: 20vw;
  height: 200px;
  max-height: 20vh;
  object-fit: contain;
}
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <td>Изображение</td>
        <td>Модель</td>
        <td>Bench</td>
        <td>Однопоточный тест</td>
        <td>Двухпоточный тест</td>
        <td>Четырёхпоточный тест</td>
        <td>Восьмипоточный тест</td>
        <td>64-х-поточный тест</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><img src="https://placehold.co/600x400" /></td>
        <td><div>@CPU.ModelName</div></td>
        <td><div>@CPU.Bench</div></td>
        <td><div>@CPU.Cores1</div></td>
        <td><div>@CPU.Cores2</div></td>
        <td><div>@CPU.Cores4</div></td>
        <td><div>@CPU.Cores8</div></td>
        <td><div>@CPU.Cores64</div></td>
      </tr>
      <tr>
        <td><img src="https://placehold.co/400x600" /></td>
        <td><div>@CPU.ModelName</div></td>
        <td><div>@CPU.Bench<br>Ну подлиннее...</div></td>
        <td><div>@CPU.Cores1</div></td>
        <td><div>@CPU.Cores2<br>Ну подлиннее...</div></td>
        <td><div>@CPU.Cores4</div></td>
        <td><div>@CPU.Cores8</div></td>
        <td><div>@CPU.Cores64</div></td>
      </tr>
      <tr>
        <td><img src="https://placehold.co/400x400" /></td>
        <td><div>@CPU.ModelName</div></td>
        <td><div>@CPU.Bench</div></td>
        <td><div>@CPU.Cores1</div></td>
        <td><div>@CPU.Cores2</div></td>
        <td><div>@CPU.Cores4</div></td>
        <td><div>@CPU.Cores8</div></td>
        <td><div>@CPU.Cores64</div></td>
      </tr>
      <tr>
        <td><img src="https://placehold.co/400x400" /></td>
        <td><div>@CPU.ModelName</div></td>
        <td><div>@CPU.Bench</div></td>
        <td><div>@CPU.Cores1</div></td>
        <td><div>@CPU.Cores2</div></td>
        <td><div>@CPU.Cores4</div></td>
        <td><div>@CPU.Cores8</div></td>
        <td><div>@CPU.Cores64</div></td>
      </tr>
      <tr>
        <td><img src="https://placehold.co/400x400" /></td>
        <td><div>@CPU.ModelName</div></td>
        <td><div>@CPU.Bench</div></td>
        <td><div>@CPU.Cores1</div></td>
        <td><div>@CPU.Cores2</div></td>
        <td><div>@CPU.Cores4</div></td>
        <td><div>@CPU.Cores8</div></td>
        <td><div>@CPU.Cores64</div></td>
      </tr>
    </tbody>
  </table>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.