html - 如何在 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;
    }
}