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;
    }
}

如何在jQuery Mobile中围绕行放置边框

1 个答案: