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