在表格數據中添加「側邊欄」？

這可能很容易做到，但我什麼也想不出來。可以說我有一行數據，看起來像這樣：在表格數據中添加「側邊欄」？

data | data | data | data | data | 
data | data | data | data | data | 
data | data | data | data | data | 
data | data | data | data | data |

，並就在旁邊，我需要這樣的：

a data | data | data | data | data | 
b data | data | data | data | data | 
c data | data | data | data | data | 
d data | data | data | data | data |

儘管「ABCD」字符串被一個DIV /列和填充表格自動給出的高度。

所以基本上是一個行內的列。思考？

要求是它是一個流體表。這只是一個帶有行的表格，沒有其他。它基於display：table/table-row/table-header/table-cell方法構建。

簡化的標記：

.data { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    border-spacing: 0; 
    border-collapse: collapse 
} 
    .data header { 
     display: table-header-group; 
     height: auto; 
     border-bottom: 1px solid #2B597B 
    } 
    .data section { 
     display: table-row-group 
    } 
    .data article { 
     display: table-row; 
     line-height: 21px; 
     padding: 0 3px 
    } 
    .data span { 
     display: table-cell; 
     overflow: hidden 
    }

有了：

<div class="data"> 
<header> 
    <span>one</span> 
    <span>two</span> 
</header> 
<section> 
    <article> 
     <span>one</span> 
     <span>two</span> 
    </article> 
</section> 
</div>

它無關W /增量數據。只是東西，它可能是一個空的空間。

來源

2011-10-11 Talasan Nicholson

想法：少數。加價..？任何要求，你試過了什麼？ –

更新了我的文章 –

只需使您的「側邊欄」的行數等於總行數的表格單元格。

除此之外：你會發現很多人雖然用這種方式在上流下了很多眼淚。我的建議是：務實。花你的時間解決真正的問題，而不是用純粹的語義HTML語氣。

一個例子：

<table> 
    <tr> 
    <td rowspan="2">the sidebar</td> 
    <th>one</th> 
    <th>two</th> 
    </tr> 
    <tr> 
    <td>one</td> 
    <td>two</td> 
    </tr> 
</table>

來源

2011-10-11 22:14:12 Larsenal

「花時間解決真正的問題，而不是爲了純淨而使用語義HTML。」真正的說。 –

你有沒有例子？我無法把頭圍住。表不是我的事。 –

使用真實的'

'。不要太聰明。 – Larsenal

你可能需要一個列表，因爲你使用遞增值..所以：

<ul> 
    <li> 
     <ul> 
      <li>stuff</li> 
      <li>more stuff</li> 
     </ul> 
    </li> 
</ul>

等

主列表可以給出按照css值列表樣式的字母順序增量和secundairy列表可以通過使用css屬性顯示內聯顯示。但是語義上您應該使用表來表示數據。只需向數據添加一列即可，因爲增量有點像每個記錄的主鍵。

來源

2011-10-11 22:17:31

更新的主要問題，它不是做W /增量值。 –

根據您的需要爲跨瀏覽器兼容，你可以使用CSS的生成內容和計數器：

td { 
    font-size: 1em; 
    width: 5em; 
    padding: 0.5em 1em; 
    border: 1px solid #ccc; 
    margin: 0 auto; 
} 

table { 
    counter-reset: tableRowNum; 
} 

tbody tr { 
    counter-increment: tableRowNum; 
} 

tbody tr:before { 
    font-size: 1em; 
    content: counter(tableRowNum, lower-alpha); 
    display: block; 
    padding: 0.5em; 
    position: relative; 
    top: 1px; 
    border-bottom: 1px solid #ccc; 
}

JS Fiddle demo。

這當然有IE8或9可能會導致或無法呈現增量的常見警告。如果您不想將增量值硬編碼到表格中，可能需要使用JavaScript來添加「數字」。

平原JavaScript解決方案（儘管這假設加入到各行已經空td元件和存在僅防止具有硬編碼的遞增的數字）：

var rows = document.getElementsByTagName('tr'); 

for (i=0; i<rows.length; i++){ 
    rows[i].firstElementChild.innerHTML = i; // zero-based counting. 
}

JS Fiddle demo。

來源

2011-10-11 22:24:43

更新的主要問題，它不是做w /增量值。但好主意。 –

相關問題

在表格數據中添加「側邊欄」？

回答

相關問題