Question

我想组织报表的布局（请参见下图的链接），以使用div元素代替表格。我怎样才能做到这一点？我已经将报告转换为表格，但是我不确定如何使用div标签实现相同的外观。我已将报告转换为html，但它使用表格布局。我不熟悉如何使用div标签执行相同操作。任何帮助将不胜感激。

以下是HTML /表格布局的小提琴： https://dotnetfiddle.net/xrbYXZ

这里是报告图像的链接 layout of report

Answer 1

要使用标签实现此目的，可以使用CSS类。为“表格”，“ tRow”，“ tHead”，“ tCell”应用一个类。这是我在这里找到的一个示例：HTML-Cleaner.com

<html>
    <h2>Phone numbers</h2>
    <div class="rTable">
    <div class="rTableRow">
    <div class="rTableHead"><strong>Name</strong></div>
    <div class="rTableHead"><span style="font-weight: bold;">Telephone</span></div>
    <div class="rTableHead">&nbsp;</div>
    </div>
    <div class="rTableRow">
    <div class="rTableCell">John</div>
    <div class="rTableCell"><a href="tel:0123456785">0123 456 785</a></div>
    <div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
    </div>
    <div class="rTableRow">
    <div class="rTableCell">Cassie</div>
    <div class="rTableCell"><a href="tel:9876532432">9876 532 432</a></div>
    <div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
    </div>
    </div>
</html>

对于CSS样式，至少：

.rTable { display: table; }
.rTableRow { display: table-row; }
.rTableHeading { display: table-header-group; }
.rTableBody { display: table-row-group; }
.rTableFoot { display: table-footer-group; }
.rTableCell, .rTableHead { display: table-cell; }

其他CSS样式（用于颜色和边框等）-示例：

    .rTable {
        display: table;
        width: 100%;
    }
    .rTableRow {
        display: table-row;
    }
    .rTableHeading {
        display: table-header-group;
        background-color: #ddd;
    }
    .rTableCell, .rTableHead {
        display: table-cell;
        padding: 3px 10px;
        border: 1px solid #999999;
    }
    .rTableHeading {
        display: table-header-group;
        background-color: #ddd;
        font-weight: bold;
    }
    .rTableFoot {
        display: table-footer-group;
        font-weight: bold;
        background-color: #ddd;
    }
    .rTableBody {
        display: table-row-group;
    }

同一来源具有值得尝试的HTML表“转换器”。

使用div标签组织布局而不是表格

1 个答案: