XForms/CSS 表格

这是一个使用 CSS 格式化表格而不实际使用 HTML 表格元素的示例。由于某些浏览器不支持动态表格布局，因此这一点至关重要。 Firefox 0.6 扩展也不支持 repeat-nodeset 属性，因此您还不能在 HTML 表格内显示重复数据。

此解决方案最大的缺点是表格的宽度必须在样式表中预先定义，并且不能根据每行中数据的宽度调整列的宽度。

程序图像

程序示例

<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xf="http://www.w3.org/2002/xforms"
 xmlns:ev="http://www.w3.org/2001/xml-events">
   <head>
      <title>Table with CSS and Divs</title>
      <style type="text/css">
* {
   font-family: Arial, Helvetica, sans-serif;
   border-collapse: collapse;
}
/* Example of doing layout of a table without using the HTML table tags */

.table { 
   display: table;
}

.tableHeader, .tableRow, .tableFooter  {
   display: table-row;
}

.leftHeaderCell, .leftCell, .leftFooterCell, 
.rightHeaderCell, .rightCell, .rightFooterCell
{
   display: table-cell;
}

.leftHeaderCell, .rightHeaderCell, .leftFooterCell {
    background-color: green;
    color: white;
    font-weight: bold;
	padding: 0 5px 0 10px;
}

.leftHeaderCell, .rightHeaderCell {
   text-align: center;
}

.leftCell {
   padding: 0 5px 0 10px;
}

.rightCell {
    text-align: right;
}

.rightFooterCell {
   text-align: right;
   border-top: solid black 2px; 
   font-weight: bold; 
}

/* Draw even rows with a light green */
.even {
	color: black;
   background-color: #CCFFCC;
}
</style>
   </head>
   <body>
      <p>Table with CSS and divs</p>
      <div class="table">
         <div class="tableHeader">
            <div class="leftHeaderCell">Description</div>
            <div class="rightHeaderCell">Value</div>
         </div>
         <div class="tableRow">
            <div class="leftCell">Item one</div>
            <div class="rightCell">$1,000.00</div>
         </div>
         <div class="tableRow even">
            <div class="leftCell">Item two</div>
            <div class="rightCell">$2,000.00</div>
         </div>
         <div class="tableRow">
            <div class="leftCell">Item three</div>
            <div class="rightCell">$3,000.00</div>
         </div>
         <div class="tableRow even">
            <div class="leftCell">Item four</div>
            <div class="rightCell">$4,000.00</div>
         </div>
         <div class="tableRow">
            <div class="leftCell">Item five has a long description</div>
            <div class="rightCell">$1,000.00</div>
         </div>
         <div class="tableFooter">
            <div class="leftFooterCell">Total: </div>
            <div class="rightFooterCell">$11,000.00</div>
         </div>
      </div>
   </body>
</html>

下一页: 搜索 Flickr | 上一页: 犯罪档案
主页: XForms