Как сделать чтобы картинка в заголовке уменьшалась, а не пропадала

Question

Основной задумкой есть создание адаптивной таблицы. Которая при уменьшении будет делить каждый свой элемент на маленькую таблицу. Как на скрине ниже. Оригинал:

Вид таблицы при маленьком размере окна браузера ( картинка пропала ):

Как сделать чтобы при уменьшении экрана картина не пропадала со всем thead, а уменьшалась и перемещалась в td::before? Проблема в display: none, но как сделать по другому?

@media screen and (max-width: 1024px) {
  /*responsive table*/
  table.table thead {
    display: none;
  }

table.table thead td::before{
        display: block;
        content: attr(columnName);
        left: 0;
        padding-left: 5px;
        font-size: 8pt;
        font-weight: bold;
        text-align: left;
        position: absolute;
    }
    
    table.table thead td img.image{
        display: block;
        left: 0;
        position: relative;
        content: url("https://picsum.photos/seed/picsum/200/200");
    }
  table.table,
  table.table tbody,
  table.table tr,
  table.table td {
    display: block;
    width: calc(100% - 1mm);
  }
  table.table tr {
    margin-top: 4mm;
  }
  table.table td {
    text-align: left;
    position: relative;
    width: calc(100% - 25mm);
    padding-left: 25mm;
  }
  table.table td.entry::before {
    content: attr(columnName);
    position: absolute;
    left: 0;
    padding-left: 5px;
    font-size: 8pt;
    font-weight: bold;
    text-align: left;
  }
  /*fix centering notes/warnings when small viewport*/
  table.icons_wrap tbody {
    display: table-row-group;
    vertical-align: middle;
  }
  table.icons_wrap tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
  }
  table.icons_wrap td {
    display: table-cell;
    padding-left: 0px;
  }
  table.icons_wrap td>.paragraph_content_warnOrStop {
    text-align: left;
  }
}

<table class="table" style="table-layout:fixed; ">
  <colgroup>
    <col width="1*">
    <col width="4*">
    <col width="2.46*">
    <col width="2.46*">
    <!--thead-->
  </colgroup>
  <thead>
    <!--row-->
    <tr>
      <!--entry-->
      <td style="" columnname="Trin  " class="entry entry_header_attributes ">
        <div>Trin
          <!--image-->
          <img class="image" src="http://localhost:88/SanovoNext/ImageHandler.aspx?url=http://doccentermedia//DCProImages/STG-NL/general%20topic/Jansen%20logo.jpg&amp;w=85.18mm&amp;h=72.22mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId="
            original_width="85.18mm" original_height="72.22mm" style="width: 85.18mm; height: 72.22mm">
        </div>
      </td>
      <!--entry-->
      <td style="" columnname="AAA" class="entry entry_header_attributes ">
        <div>AAA</div>
      </td>
      <!--entry-->
      <td style="" columnname="BBB" class="entry entry_header_attributes ">
        <div>BBB</div>
      </td>
      <!--entry-->
      <td style="" columnname="CCC" class="entry entry_header_attributes ">
        <div>CCC</div>
      </td>
    </tr>
  </thead>
  <!--tbody-->
  <tbody>
    <!--row-->
    <tr>
      <!--entry-->
      <td style="" columnname="Trin  " class="entry ">
        <div>1</div>
      </td>
      <!--entry-->
      <td style="" columnname="AAA" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
          quis, sem.</div>
      </td>
      <!--entry-->
      <td style="" columnname="BBB" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div>
      </td>
      <!--entry-->
      <td style="" columnname="CCC" class="entry ">
        <div>100</div>
      </td>
    </tr>
    <!--row-->
    <tr>
      <!--entry-->
      <td style="" columnname="Trin  " class="entry ">
        <div>2</div>
      </td>
      <!--entry-->
      <td style="" columnname="AAA" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
          quis, sem.</div>
      </td>
      <!--entry-->
      <td style="" columnname="BBB" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div>
      </td>
      <!--entry-->
      <td style="" columnname="CCC" class="entry ">
        <div>500</div>
      </td>
    </tr>
    <!--row-->
    <tr>
      <!--entry-->
      <td style="" columnname="Trin  " class="entry ">
        <div>3</div>
      </td>
      <!--entry-->
      <td style="" columnname="AAA" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
          quis, sem.</div>
      </td>
      <!--entry-->
      <td style="" columnname="BBB" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div>
      </td>
      <!--entry-->
      <td style="" columnname="CCC" class="entry ">
        <div>800</div>
      </td>
    </tr>
    <!--row-->
    <tr>
      <!--entry-->
      <td style="" columnname="Trin  " class="entry ">
        <div>4</div>
      </td>
      <!--entry-->
      <td style="" columnname="AAA" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
          quis, sem.</div>
      </td>
      <!--entry-->
      <td style="" columnname="BBB" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div>
      </td>
      <!--entry-->
      <td style="" columnname="CCC" class="entry ">
        <div>1000</div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Для достижения данного поведения на мой взгляд проще воспользоваться grid (он уже почти везде поддерживается, но нужно смотреть по требованиям). Без дублирования не обошлось, но если есть возможность то работу существенно можно облегчив написав скрипт который будет генерировать ту же разметку из json данных, к тому же обычно так и бывает, либо на сторне сервера даже если он использует php можно создать такую таблицу через генерацию разметки.

Результат:

Решение:

Прежде всего используем некоторый класс для того чтобы он мог задать бэкграунд (можно решать без класса но мне кажется это проще):

.img{
  background: var(--src) no-repeat center;
  background-size: contain;
}

Общая схема выглядит так:

грид контейнер
  заголовок-колонки1
  заголовок-колонки2
  заголовок-колонки...

  заголовок-строки1 
  данные

  заголовок-строки2 
  данные 
  ...

Далее нам нужно задать стили для grid контейнера и для всех его составляющих: ячейки, горизонтальные заголовки, вертикальные заголовки) Если мы хотим сделать визуальное разделение табилиц то мы можем использовть дополнительный класс, который будем добавлять в последней строке конкретной таблицы. Для того чтобы сделать границы ячеек в один пиксель можно воспользоваться таким способом, ячейки рисуют бордер только сверху и слева, а контейнер — справа и снизу.

Конечно, не все универсально в этом решении например для полноразмерного просмотра мы используем захардкоженное количество в 4 элемента:

grid-template-areas: '. . . .';

а для ужатого 2:

grid-template-areas: '. .';

а так же для ячейки с данными используем захардкоженный спан:

grid-column: 2 / span 3;

но, я думаю, при большом желании это тоже можно настраивать через css переменные

Код примера (нужно заменить картинки):

<!DOCTYPE html>
<html>
<head>
<style>
.img{
  background: var(--src) no-repeat center;
  background-size: contain;
}
.grid-container {
  display: grid;
  grid-template-areas: '. . . .'; 
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.colhead {
  height: 100px;
  min-width: 100px;
}
.rowhead {
  min-width: 100px;
  min-height: 50px;
  display: none;
}
.item {
  grid-column: auto / span 1;
}
.colhead, .rowhead, .item{
  border-left: 1px solid black;
  border-top: 1px solid black;
}
.grid-container > div {
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .colhead {
    display: none;
  }
  .rowhead {
    display: inline-block;
  }
  .break {
    margin-bottom: 20px;
    border-bottom: 1px solid black;
  }
  .item {
    grid-column: 2 / span 3;
    border-right: 1px solid black;
  }
  .grid-container {
    display: grid;
    grid-template-areas: '. .'; 
    border-bottom: 0;
    border-right: 0;
  }
}
</style>
</head>
<body>
  <div class="grid-container">
    <!-- заголовки колонок -->
    <div class="colhead img" style="--src:url('img1.png')">AAA</div>
    <div class="colhead">BBB</div>
    <div class="colhead img" style="--src:url('img2.png')">CCC</div>  
    <div class="colhead">DDD</div>
    <!-- 1-я строка заголовки строк и данные -->
    <div class="rowhead first img" style="--src:url('img1.png')">AAA</div>
    <div class="item">1</div>
    <div class="rowhead">BBB</div>
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quibusdam soluta quas veritatis accusantium incidunt cum facere ipsum laboriosam quidem atque harum itaque quia at, quisquam dignissimos, ex eius optio!</div>
    <div class="rowhead img" style="--src:url('img2.png')">CCC</div>
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="rowhead break">DDD</div>
    <div class="item break">1000</div>
    <!-- 2-я строка заголовки строк и данные -->
    <div class="rowhead first img" style="--src:url('img1.png')">AAA</div>
    <div class="item">2</div>
    <div class="rowhead">BBB</div>
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quibusdam soluta quas veritatis accusantium incidunt cum facere ipsum laboriosam quidem atque harum itaque quia at, quisquam dignissimos, ex eius optio!</div>
    <div class="rowhead img" style="--src:url('img2.png')">CCC</div>
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="rowhead break">DDD</div>
    <div class="item break">2000</div>
    <!-- 3-я строка заголовки строк и данные -->
    <div class="rowhead first img" style="--src:url('img1.png')">AAA</div>
    <div class="item">3</div>
    <div class="rowhead">BBB</div>
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quibusdam soluta quas veritatis accusantium incidunt cum facere ipsum laboriosam quidem atque harum itaque quia at, quisquam dignissimos, ex eius optio!</div>
    <div class="rowhead img" style="--src:url('img2.png')">CCC</div>
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="rowhead break">DDD</div>
    <div class="item break">3000</div>
    <!-- 4-я строка заголовки строк и данные -->
    <div class="rowhead first img" style="--src:url('img1.png')">AAA</div>
    <div class="item">4</div>
    <div class="rowhead">BBB</div>
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quibusdam soluta quas veritatis accusantium incidunt cum facere ipsum laboriosam quidem atque harum itaque quia at, quisquam dignissimos, ex eius optio!</div>
    <div class="rowhead img" style="--src:url('img2.png')">CCC</div>
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="rowhead break">DDD</div>
    <div class="item break">4000</div>
    <!-- 5-я строка заголовки строк и данные -->
    <div class="rowhead first img" style="--src:url('img1.png')">AAA</div>
    <div class="item">5</div>
    <div class="rowhead">BBB</div>
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quibusdam soluta quas veritatis accusantium incidunt cum facere ipsum laboriosam quidem atque harum itaque quia at, quisquam dignissimos, ex eius optio!</div>
    <div class="rowhead img" style="--src:url('img2.png')">CCC</div>
    <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="rowhead break">DDD</div>
    <div class="item break">5000</div>
  </div>
</body>
</html>

Дополнение (к ответу автора вопроса):

table.table td.entry[data-image-src]/*::before*/{
    background: url(img1.png) no-repeat 50px 0px ;
    background-size: contain;
    /*content: url("img1.png");*/
    position: absolute;
    /*left: 0;
    padding-left: 5px;
    font-size: 8pt;
    font-weight: bold;
    text-align: left; */
}

Это изменение правила позволяет добиться:

Answer 2

Придумал следующее. Если в хедере есть картинка то в td я добавляю атрибут с ссылкой на картинку. В CSS потом этот аттрибут считываю при помощи доп. селектора.

table.table td.entry[data-image-src]::before{
        content: attr(data-image-src);
        position: absolute;
        left: 0;
        padding-left: 5px;
        font-size: 8pt;
        font-weight: bold;
        text-align: left;
    }

И вроде как работает, но не работает) Вместо картинки выводится текст ссылки.

Если хардкодить content: url(*image link*); То тогда картинки видно, но они почему-то не реагируются на установку width/heught. Как можно установить этим картинкам ширину и высоту?

<table class="table" style="table-layout:fixed; ">
  <colgroup>
    <col width="1*">
    <col width="4*">
    <col width="2.46*">
    <col width="2.46*">
    <!--thead-->
  </colgroup>
  <thead>
    <!--row-->
    <tr>
      <!--entry-->
      <td style="" data-image-src="http://localhost:88/SanovoNext/ImageHandler.aspx?url=http://doccentermedia//DCProImages/STG-NL/general%20topic/Jansen%20logo.jpg&amp;w=85.18mm&amp;h=72.22mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" class="entry entry_header_attributes ">
        <div>
          <!--image-->
          <img class="image" src="http://localhost:88/SanovoNext/ImageHandler.aspx?url=http://doccentermedia//DCProImages/STG-NL/general%20topic/Jansen%20logo.jpg&amp;w=85.18mm&amp;h=72.22mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" original_width="85.18mm" original_height="72.22mm" style="width: 85.18mm; height: 72.22mm">
        </div>
      </td>
      <!--entry-->
      <td style="" columnname="AAA" class="entry entry_header_attributes ">
        <div>AAA</div>
      </td>
      <!--entry-->
      <td style="" columnname="BBB" class="entry entry_header_attributes ">
        <div>BBB</div>
      </td>
      <!--entry-->
      <td style="" columnname="CCC" class="entry entry_header_attributes ">
        <div>CCC</div>
      </td>
    </tr>
  </thead>
  <!--tbody-->
  <tbody>
    <!--row-->
    <tr>
      <!--entry-->
      <td style="" data-image-src="http://localhost:88/SanovoNext/ImageHandler.aspx?url=http://doccentermedia//DCProImages/STG-NL/general%20topic/Jansen%20logo.jpg&amp;w=85.18mm&amp;h=72.22mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" class="entry ">
        <div>1</div>
      </td>
      <!--entry-->
      <td style="" columnname="AAA" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
      </td>
      <!--entry-->
      <td style="" columnname="BBB" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div>
      </td>
      <!--entry-->
      <td style="" columnname="CCC" class="entry ">
        <div>100</div>
      </td>
    </tr>
    <!--row-->
    <tr>
      <!--entry-->
      <td style="" data-image-src="http://localhost:88/SanovoNext/ImageHandler.aspx?url=http://doccentermedia//DCProImages/STG-NL/general%20topic/Jansen%20logo.jpg&amp;w=85.18mm&amp;h=72.22mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" class="entry ">
        <div>2</div>
      </td>
      <!--entry-->
      <td style="" columnname="AAA" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
      </td>
      <!--entry-->
      <td style="" columnname="BBB" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div>
      </td>
      <!--entry-->
      <td style="" columnname="CCC" class="entry ">
        <div>500</div>
      </td>
    </tr>
    <!--row-->
    <tr>
      <!--entry-->
      <td style="" data-image-src="http://localhost:88/SanovoNext/ImageHandler.aspx?url=http://doccentermedia//DCProImages/STG-NL/general%20topic/Jansen%20logo.jpg&amp;w=85.18mm&amp;h=72.22mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" class="entry ">
        <div>3</div>
      </td>
      <!--entry-->
      <td style="" columnname="AAA" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
      </td>
      <!--entry-->
      <td style="" columnname="BBB" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div>
      </td>
      <!--entry-->
      <td style="" columnname="CCC" class="entry ">
        <div>800</div>
      </td>
    </tr>
    <!--row-->
    <tr>
      <!--entry-->
      <td style="" data-image-src="http://localhost:88/SanovoNext/ImageHandler.aspx?url=http://doccentermedia//DCProImages/STG-NL/general%20topic/Jansen%20logo.jpg&amp;w=85.18mm&amp;h=72.22mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" class="entry ">
        <div>4</div>
      </td>
      <!--entry-->
      <td style="" columnname="AAA" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
      </td>
      <!--entry-->
      <td style="" columnname="BBB" class="entry ">
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div>
      </td>
      <!--entry-->
      <td style="" columnname="CCC" class="entry ">
        <div>1000</div>
      </td>
    </tr>
  </tbody>
</table>

@media screen and (max-width: 1024px)   
{
    /*responsive table*/
    table.table thead{
        display: none;
    }

    table.table, table.table tbody, table.table tr, table.table td{
        display: block;
        width: calc(100% - 1mm);
    }
    
    table.table tr{
        margin-top: 4mm;
    }
    
    table.table td{
        text-align: left;
        position: relative;
        width: calc(100% - 25mm);
        padding-left: 25mm;
    }
    
    table.table td.entry::before{
        content: attr(columnName);
        position: absolute;
        left: 0;
        padding-left: 5px;
        font-size: 8pt;
        font-weight: bold;
        text-align: left;
    }
    
    table.table td.entry[data-image-src]::before{
        content: url("http://localhost:88/SanovoNext/ImageHandler.aspx?url=http://doccentermedia//DCProImages/STG-NL/general%20topic/Jansen%20logo.jpg&w=5.18mm&h=2.22mm&ro=0&mode=xhtmlGen&max_width=&max_height=&dpi=&reportId=");
        position: absolute;
        left: 0;
        padding-left: 5px;
        font-size: 8pt;
        font-weight: bold;
        text-align: left;
    }
    
    /*fix centering notes/warnings when small viewport*/
    table.icons_wrap tbody {
        display: table-row-group;
        vertical-align: middle;
    }
    
    table.icons_wrap tr {
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }
    
    table.icons_wrap td {
        display: table-cell;
        padding-left: 0px;
    }
    
    table.icons_wrap td>.paragraph_content_warnOrStop {
        text-align: left;
    }
}

БЛОГ НА HUSL

Как сделать чтобы картинка в заголовке уменьшалась, а не пропадала

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