0

I'm attempting to apply media queries to a table to hide optional columns on smaller devices.

I have two columns to hide based on two screen breaks:

@media screen and (max-width: 33em) {
  th.optional-1,
  td.optional-1 {
    display: none !important;
  }
}
@media screen and (max-width: 43em) {
  th.optional-2,
  td.optional-2 {
    display: none !important;
  }
}

Then I apply class="optional-1" to both the th and td elements. I add data-role="table" to get the table to style correctly.

The media query works fine, however once the table gets to the default responsive size the table drops to a flattened view. I first thought about adding a class to force the table to be unresponsive (which works) but it then stops my optional classes working as both are competing with !important which is required to get over the default responsive style in JQM.

.table-responsive-none td,
.table-responsive-none th,
.table-responsive-none tbody th,
.table-responsive-none tbody td,
.table-responsive-none thead td,
.table-responsive-none thead th {
  display: table-cell !important;
  margin: 0 !important;
}
.table-responsive-none td .ui-table-cell-label,
.table-responsive-none th .ui-table-cell-label {
  display: none !important;
}

Alternatively I could use data-mode="columntoggle" but I don't want the behaviour of the column toggling facility and I want to also specify my own breaks.

The problem is fixed when removing data-role="table" but then the table doesn't look right.

4

1 回答 1

0

要是我早点想到这个就好了。

我通过删除data-role="table"该类并将其添加ui-table到表中解决了该问题，该表现在关闭响应行为并让我控制它。最后，我只需要媒体查询来隐藏给定中断处的列。

@media screen and (max-width: 33em) {
  th.optional-1,
  td.optional-1 {
    display: none !important;
  }
}
@media screen and (max-width: 43em) {
  th.optional-2,
  td.optional-2 {
    display: none !important;
  }
}
于 2013-10-23T05:50:09.377 回答