Как сделать мою таблицу html отзывчивой

Question

Я создал таблицу html wchich, похожую на 2d structure.i, чтобы сделать эту таблицу отзывчивой. Я уже пробовал некоторые методы. отзывчивый метод столбца не подходит для моей таблицы, потому что становится трудно понять данные таблицы. Другие предложения?

мой пример структуры таблицы похожа на эту

<table class="indoor-table" style="width: 100%; border-collapse: collapse; border: 1px solid #e67817;"> 
 
<thead> 
 
<tr> 
 
<th style="border: 1px solid #e67817; text-align: center;">pixel pitch</th> 
 
<th style="width: 11.5%; border: 1px solid #e67817; text-align: center;" align="center">3</th> 
 
<th style="width: 11.5%; border: 1px solid #e67817; text-align: center;" align="center">4</th> 
 
</tr> 
 
</thead> 
 
<tbody> 
 
<tr> 
 
<td style="width: 20%; border: 1px solid #e67817;">Module Resolution (W*H Pixel)</td> 
 
<td style="width: 11.5%; border: 1px solid #e67817;" align="center">192*192</td> 
 
<td style="width: 11.5%; border: 1px solid #e67817;" align="center">128*128</td> 
 
<td style="width: 11.5%; border: 1px solid #e67817;" align="center">160*160</td> 
 
</tr> 
 
<tr> 
 
<td style="width: 11.5%; border: 1px solid #e67817;" align="center">160*160</td> 
 
<td style="width: 11.5%; border: 1px solid #e67817;" align="center">192*96</td> 
 
<td style="width: 11.5%; border: 1px solid #e67817;" colspan="2" align="center">32*16</td> 
 
<td style="width: 11.5%; border: 1px solid #e67817;" align="center">16*16</td> 
 
</tr> 
 
</tbody> 
 
</table>

некоторые реагирующие методы не работают должным образом из-за Colspan, я не хочу использовать горизонтальную прокрутку method.so предложить мне альтернатива, которая подходит для моего стола.

Answer 1

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

http://exisweb.net/responsive-table-plugins-and-patterns

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

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

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