Question

美好的一天！我想问一下我怎么能这样做我的桌子？

这是我的代码，但不幸的是我遇到了边框，行和单元格大小的问题。 #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;
}

提前致谢！

Answer 1

如果您尝试溢出：隐藏;在.table中，它应该解决你的问题

Answer 2

抱歉，但我不太明白你在边框和行上的问题。但是假设你希望你的桌子像这样。为什么不使用<table>代码而不是<div>？使用<table>，您可以按照您希望的方式格式化表格。

http://jsfiddle.net/Lfnk0b4a/

注意：如果您想在UI上向我们展示，最好使用jsfiddle向我们展示。在这种情况下，我们可以轻松地看到问题并解决它在jsfiddle上提供代码。

Answer 3

你只需要添加一个类＆＃39; row＆＃39;到每一行。例如：

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

以下是工作示例：JsFiddle

使用DIVS创建表格？

3 个答案: