如何在 jQuery Mobile 中为行设置边框

Question

我正在我的 HTML 表格中使用表格重排。我只是想在表格中的行周围放置边框。当我通过 Chrome 检查元素并看到 jQuery Mobile 将以下类附加到表中时：

ui-responsive table-stroke ui-table ui-table-reflow

因此我希望添加以下样式：

.ui-responsive .table-stroke .ui-table .ui-table-reflow tr
{
  border-style:solid;
  border-width:5px;
}

但是，无论屏幕大小如何，我仍然无法在行周围获得边框。任何想法我如何实现这一目标

Answer 1

我从您的描述中假设您只想要全宽的行周围的边框，而不是单个单元格，然后当表格重排时，您再次需要每行周围的边框（实际上是显示在单独行上的单元格）。

如果是这样，这里是 DEMO

在 CSS 中，媒体查询用于在更宽的屏幕上查看表格时。在这种情况下，我们给 TR（行）一个边框，并将单元格边框设置为 0。当屏幕较窄且表格回流时，TR 边框为 0，并设置 TD 边框。你应该在演示中使用 CSS 来获得你想要的东西。

.ui-table tr {
    border: 0px solid rgb(51,51,51);
}
.ui-table-reflow.ui-responsive td, .ui-table-reflow.ui-responsive th {
    border: 2px solid rgb(51,51,51);
    border-left:4px solid rgb(51,51,51);
    border-right:4px solid rgb(51,51,51);
}
.ui-table-reflow.ui-responsive td:first-child, .ui-table-reflow.ui-responsive th:first-child {
    border-top:4px solid rgb(51,51,51);
}
.ui-table-reflow.ui-responsive td:last-child, .ui-table-reflow.ui-responsive th:last-child {
    border-bottom:4px solid rgb(51,51,51);
}


@media ( min-width: 35em ) {
    .ui-table tr {
        border: 4px solid rgb(51,51,51);
    }

    .ui-table-reflow.ui-responsive td, .ui-table-reflow.ui-responsive th {
         border: 0;
    }
}