Как использовать CSS для стилизации динамически сгенерированной таблицы без изменения HTML таблицы?

Question

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

Мне поручено использовать план CSS3 для стилизации динамически создаваемой таблицы, чтобы она была удобной для мобильных устройств. Вот пример таблицы: generate-table-image

Я бы предпочел перестроить эту таблицу, используя S CSS и flexbox, чтобы сделать ее удобной для мобильных устройств. Но я не могу использовать S CSS или добавлять или изменять код .jspf, который генерирует таблицу. Потому что он используется повторно в 20 других местах. Любые изменения в коде .jspf повредят эти другие экземпляры таблицы.

Поскольку я не могу изменить код .jspf, я не уверен, как настроить эту таблицу для размещения на мобильных устройствах. Какие-либо предложения?

Ниже приведен код .jspf, который генерирует таблицу.

images/action_icon.png">

РЕДАКТИРОВАТЬ: Спасибо всем, кто сделал предложения. Я разобрался, как сделать стол мобильным дружественным.

Вот анимированный GIF, показывающий переключение таблицы между обычным и стековым режимом. Таблица для мобильных устройств

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

@media (max-width: 800px){

    .staff-registration .staff-container .tableHeader{
        display: none;
    }

    .staff-registration .staff-container .orgUsersColumn{
        width: 100% !important;
        display: block !important;
    }

    .staff-registration .staff-container .orgUsersColumn .cell{
        float: left;
        margin: 0 0 10px 0;
    }

    .staff-registration .staff-container .orgUsersColumn .actionDropdown{
     right: 0;
     left: 5%;
    }
}

Answer 1

Я собрал этот простой код, надеюсь, он поможет. Главное, на чем вы должны сосредоточиться - это выбрать таблицу с помощью селекторов. Если нет, стили будут применены ко всем таблицам.

HTML Код:

table {
   border-collapse: collapse;
}

/*  Selecting td   */
table td, table th {
   border: 1px solid #888;
}

/*  Selecting td   */
table td:first-child, table th:first-child {
   font-weight: bold;
   font-size: large;
}

table td:nth-child(2), table th:nth-child(2) {
   font-weight: thin;
   font-size: small;
}

table th:last-child {
   color: blue;
}

table td:last-child {
   color: red;
}

<table>
   <thead>
      <tr>
         <th>Column 1</th>
         <th>Column 2</th>
         <th>Column 3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1</td>
         <td>Row 1</td>
         <td>Row 1</td>
      </tr>
      <tr>
         <td>Row 2</td>
         <td>Row 2</td>
         <td>Row 2</td>
      </tr>
      <tr>
         <td>Row 3</td>
         <td>Row 3</td>
         <td>Row 3</td>
      </tr>
   </tbody>
</table>