Tablo olmadan yapı gibi HTML tablo

Question

<table> kullanmadan yapı gibi 2 sütun tablo oluşturmaya çalışıyorum, 2. sütun Burada, metin taştığında ben sağ tarafta kalmak istiyorum. Ben kodum çok uzak - https://jsfiddle.net/a49vuup1/

<div class="mainbox"> 

    <span class="leftbox"> STATE </span> : <span class="rightbox">TAMILNADU TAMILNADU TAMILNADU TAMILNADU</span> 
    <div class="myhr"></div> 
    <span class="leftbox"> Phone </span> : <span class="rightbox">Landline</span> 


</div> 

ve benim css Ayrıca

.mainbox { 
    max-width: 300px; 
    margin: auto; 
    border: 1px solid #454242; 
    margin-top: 30px; 
} 

hr { 
    border-top: 3px solid rgba(44, 44, 44, 0.69); 
} 

.leftbox { 
    border-right: 1px solid #303925; 
    font-size: 20px; 
    padding: 5px; 
    min-width: 150px; 
    display: inline-block; 
} 

.myhr { 
    border-bottom: 1px solid #293A42; 
} 

.rightbox { 
    font-size: 16px; 
    min-width: 150px; 
} 

Answer 1

bu deneyin:

<div class="table"> 
    <div class="table-row"> 
    <div class="cell"> 
     text 1 
    </div> 
    <div class="cell"> 
     text 2 
    </div> 
    </div> 
    <div class="table-row"> 
    <div class="cell"> 
     text 3 
    </div> 
    <div class="cell"> 
     text 4 
    </div> 
    </div> 
</div> 

css:

.table { 
    display: table; 
    table-layout: fixed; 
    border-collapse: collapse; 
} 

.table-row { 
    display: table-row; 
} 

.cell { 
    display: table-cell; 
    border: 1px solid black; 
} 

https://jsfiddle.net/41vpjpuy/

Ben

<div class="mainbox"> 
    <div class="row"> 
    <span class="leftbox">State</span>: <span class="rightbox">TAMILNADU TAMILNADUTAMILNADU TAMILNADU</span> 
    </div> 
    <div class="row"> 
    <span class="leftbox">Phone</span>: <span class="rightbox">landline</span> 
    </div> 
</div> 

CSS css ve html eddited

Answer 2

da bu deneyin.

.mainbox { 
    max-width: 300px; 
    margin: auto; 
    border: 1px solid #454242; 
    margin-top: 30px; 
    display: table; 
} 
.row { 
    display:table-row; 
} 
{ 
    border-top: 3px solid rgba(44, 44, 44, 0.69); 
} 
.leftbox { 
    border-right: 1px solid #303925; 
    font-size: 20px; 
    padding: 5px; 
    min-width: 150px; 
    word-wrap: break-word; 
    display: table-cell; 
    width:25%; 
} 
.myhr 
{ 
    border-bottom: 1px solid #293A42; 

} 
.rightbox { 
    /* word-wrap: break-word; */ 
    font-size: 16px; 
min-width: 150px; 
display:table-cell; 
} 

Answer 3

<hr> ve .myhr'un ne olduğundan emin değildim, bu yüzden her iki sütunu da kapsaması gerektiğini tahmin ettim. .leftbox ve .rightbox için display: table-cell'u kullandım ve .mainboxdisplay: table'u yaptım ve table-layout: fixed ekledim, böylece uzunluklarınız daha anlamlı olur.

Reference

Fiddle

Pasaj

.mainbox { 
 
    max-width: 300px; 
 
    margin: auto; 
 
    border: 1px solid #454242; 
 
    margin-top: 30px; 
 
    display: table; 
 
    table-layout: fixed; 
 
    border-spacing: 3px; 
 
    border-collapse: separate; 
 
} 
 
hr { 
 
    border-top: 3px solid rgba(44, 44, 44, 1); 
 
    width: 200%; 
 
} 
 
.leftbox { 
 
    border-right: 1px solid #303925; 
 
    font-size: 20px; 
 
    padding: 5px; 
 
    min-width: 150px; 
 
    display: table-cell; 
 
} 
 
.myhr { 
 
    border-bottom: 2px solid #000; 
 
    display: table-row; 
 
    width: 200%; 
 
    min-height: 30px; 
 
    padding: 5px; 
 
} 
 
.rightbox { 
 
    font-size: 16px; 
 
    min-width: 150px; 
 
    display: table-cell; 
 
}

<div class="mainbox"> 
 

 
    <span class="leftbox"> STATE </span> : <span class="rightbox">TAMILNADU TAMILNADU TAMILNADU TAMILNADU</span> 
 
    <div class="myhr"> 
 
    <hr/> 
 
    </div> 
 
    <span class="leftbox"> Phone </span> : <span class="rightbox">Landline</span> 
 

 

 
</div>