嵌套表格行HTML CSS

我從來沒有太多複雜的HTML表格。我需要一個嵌套列和行的表格。我試圖創建它，但它有很多表格以及邊框的數量正在出現。這是我試過的jsFiddle。那麼，我要實現的是：嵌套表格行HTML CSS

單<table>標籤的所有結構
多個邊界不應該出現。
所有的結構應該是一個單一的表，行不應該從它的位置，同時調整大小的頁面分開。（在我的情況恰好）

來源

2015-04-21 trex

剛走出cursiosity的：什麼是你想實現這種結構？在我看來，你用它來設計複雜的表格單元格？ – thomaux

@Anzeo - 是的，這是客戶的要求。他給了一個PNG在桌上展示這種結構。 – trex

@trex您不應該使用表格進行佈局（電子郵件模板沒問題）對於表格式佈局，請查看引導程序。對於你的問題：你不會得到一個單一的

標籤太遠，你不能把放在裏面而不需要

– AlexG

回答

這是你的結構你想要的，沒有設置寬度的百分比值，以避免struture失去形狀，同時頁面縮放

<table border="1" width="800" height="100"> 
     <tr> 
     <th colspan="7"></th> 
     <th></th> 
     </tr> 
     <tr> 
     <td colspan="7"></td> 
     <td></td> 
     </tr> 
     <tr> 
     <td rowspan="3"></td> 
     <td></td> 
     <td colspan="3"></td> 
     <td></td> 
     <td colspan="2"></td> 
     </tr> 
     <tr> 
     <td rowspan="2"></td> 
     <td rowspan="2"></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td colspan="2"></td> 
     </tr> 
     <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td colspan="2"></td> 
     </tr> 
    </table>

來源

2015-04-21 09:38:51

- 完美解決方案！謝謝。所以這只是'rowspan'和'colspan'的遊戲。有新的東西要學習。許多感謝:) – trex

不客氣:) –

，那麼你必須做一個全局表與行的每個你有的排。並且在這些行的單元格內創建另一個表格以根據需要進行設置。

你說不應該出現多個邊框，然後讓一個類只顯示每個單元格內的表格的邊界，而不是其他的單元格，這樣你將只有所需的邊框。

請記住，全局表必須包含所有其他表。一張桌子包含一切。

在你當前的代碼中，你有多個表被分開，使得行結構非常強大，不能很好地呈現。

來源

2015-04-21 09:08:34 Joze

我嘗試過，但無法按照我的要求進行格式化。 – trex

@trex究竟是什麼要求？我以前做過（不是沒有問題），但它絕對有可能。特別是在通訊的情況下。 – Joze

只是一個具有該結構的表格。在最後一列中有一些輸入字段需要保存在數據庫中。 – trex

他爲什麼要這樣的桌子？向他扔一塊石頭。

反正，不要使用border: xx xxx xxx 儘量使用border-bottom，border-right，這樣可以最大限度地減少那裏的行數。

添加背景顏色intermitent和懸停效果，也許它會使它更容易接受。

否則，我不知道。祈禱。

來源

2015-04-21 09:20:04

感謝您的建議。我會嘗試並更新它。 – trex

好了，確切的結果，不能只用一個表來完成。您的單元出現在另一個單元的高度或寬度的一半處。那是什麼都行不通。

所以我做了你該結構，當屬接近它得到：

<table> 
    <colgroup> 
     <col width="3%" span="2" /> 
     <col width="10%" /> 
     <col width="3%" /> 
     <col width="18%" /> 
     <col width="*" span="2" /> 
    </colgroup> 
    <tr> 
     <td colspan="6">x</td> 
     <td>x</td> 
    </tr> 
    <tr> 
     <td colspan="6">x</td> 
     <td>x</td> 
    </tr> 
    <tr> 
     <td rowspan="3">x</td> 
     <td>x</td> 
     <td colspan="3">x</td> 
     <td>x</td> 
     <td>x</td> 
    </tr> 
    <tr> 

     <td rowspan="2">x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
    </tr> 
    <tr> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
    </tr> 
</table>

Updated Fiddle

來源

2015-04-21 10:09:05 LinkinTED

您的解決方案也聽起來不錯。就像好奇心一樣，在這種情況下'span =「2」'做什麼？ – trex

使用'colgroup'和'col'，您可以爲列定義樣式。所以'

'表示colums應該是3％的寬度，並且它應該跨越兩列，在這個例子中是前兩列。 – LinkinTED

@ LinkinTED-好的，有你了！謝謝 – trex

相關問題