使用DIVS創建表格？

美好的一天！我想問一下怎樣才能讓我的桌子變成這樣？使用DIVS創建表格？

這是我的代碼，但不幸的是我有邊界和行和單元格大小的問題。 #DIVception。提前致謝！

<html> 
<head> 
<title></title> 
<link rel="stylesheet" type="text/css" href="div.css"> 

</head> 



<div class="table"> 
<div class="rTable"> 
    <div class="rTableRow"> 
     <div class="rTableHead"><strong>Request:</strong></div> 
     <div class="rTableHead"><strong>Processing</strong></div> 
     <div class="rTableHead"><strong>Job Name:</strong></div> 
     <div class="rTableHead"><strong>Anthem Inventory</strong></div> 
    </div> 
</div> 
<div class="rTableMessage"> 
    <p> 
      Hi,        
      Files successfully loaded. You may now verify at your end. 
      If feed files have fallouts, reason for fallouts can be seen in  
      the error message of the file. You may edit/update your file so 
      that the other fallouts can be processed by the job. 
      Note: 
      All updated files sent to the server will update the existing 
      stored records. Hence, there will be no reloading of the 
      previous files.       

      Please see details below: 
    </p> 
</div> 

<div class="rTableDetails"> 
    <div class="rTableRow"> 
     <div class="rTableFallouts"><strong>Fallouts:</strong></div> 
     <div class="rTableHead">Check attachment</div> 
    </div> 
</div> 

<div class="rTableDetails"> 
    <div class="rTableRow"> 
     <div class="rTableLink"><strong>Link:</strong></div> 
     <div class="rTableHead">Check attachment</div> 
    </div> 
</div> 

<div class="rTableDetails"> 
    <div class="rTableRow"> 
     <div class="rTableBlank"></div> 
     <div class="rTableBlank2"></div> 
    </div> 
</div> 

<div class="rTableDetails"> 
    <div class="rTableRow"> 
     <div class="rTableLink"><strong>Details:</strong></div> 
     <div class="rTableProcess">Processed @ 5:40 PM</div> 
    </div> 
</div> 




</div> 

</html>

這是我的CSS代碼：

.table { 
width: 100%; 
height: 100%; 
border-style: solid; 
border-width: 1px; 
} 
.rTable {  
display: table;  
width: 100%; 
} 
.rTableRow {  
display: table-row; 
} 
.rTableMessage { 
padding-right: 20px; 
padding-left: 20px; 
padding-bottom: 20px; 
padding-top: 20px; 
} 
.rTableHead { 
display: table-cell;  
padding: 3px 10px;  
border: 1px solid #999999; 
} 
.rTableDetails { 
display: table;  
width: 100%;  
} 
.rTableFallouts, .rTableLink { 
display: table-cell; 
border: 1px solid #999999; 
width: 120px; 
} 
.rTableBlank { 
display: table-cell; 
border: 1px solid #999999; 
width: 120px; 
height: 25px; 
background-color: gray; 
} 
.rTableBlank2 { 
display: table-cell; 
border: 1px solid #999999; 
width: auto; 
height: 25px; 
background-color: gray; 
} 
.rDetails { 
height: auto; 
border: 1px solid #999999; 
}

提前感謝！

來源

2015-10-15 user3604330

爲什麼你想複製一個表？我不確定任何一個應該在一個。如果是這樣，請將它放在桌子上。 – Rob

歷史上，桌子因各種原因被濫用和濫用。但是，如果您的數據是表格，那麼請使用表格 - 這就是它的用途！ –

如果您嘗試溢出：hidden;在.table中，它應該修復你的問題

來源

2015-10-15 02:55:45

抱歉，我不太瞭解你的邊界和行問題。但假設你想讓你的桌子像這樣。爲什麼不使用<table>標籤而不是<div>？使用<table>，您可以按照您希望的方式來格式化表格。

http://jsfiddle.net/Lfnk0b4a/

注：如果你要告訴我們關於在UI您更好地使用jsfiddle展現給我們的。在這種情況下，我們可以很容易地看到問題，並解決它提供您的jsfiddle上的代碼。

來源

2015-10-15 03:20:22 Lian

你只需要在每一行添加一個類「行」。例如：

.row:nth-child(odd) { 
    background-color: grey; 
}

這裏是工作示例：JsFiddle

來源

2015-10-15 03:44:35

使用DIVS創建表格？

回答

相關問題