Html Tabelle wie Struktur ohne Tabelle

Question

Ich versuche, 2 Spalte Tabelle wie Struktur ohne zu verwenden <table>, hier in der zweiten Spalte, Wenn der Text überläuft Ich will es auf der rechten Seite bleiben.Hier ist mein Code so weit - 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> 

und mein css

.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

versuchen Sie dies:

<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/

Answer 2

Zusätzlich versuchen dies auch. Ich eddited Ihre CSS und HTML

<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:

.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

Ich war mir nicht sicher, was die <hr> und .myhr war, also vermutete ich, dass es beide Spalten überspannen sollte. Ich benutzte display: table-cell für .leftbox und .rightbox und machte die .mainboxdisplay: table natürlich und fügte table-layout: fixed hinzu, also können Ihre Längen mehr Sinn machen.

Reference

Fiddle

Snippet

.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>