テーブルを持たないテーブルのような構造

Question

<table>を使用せずに構造体のような2列テーブルを作成しようとしています。ここで2列目に、テキストがオーバーフローすると右側に残ります。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> 

と私の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

これを試してみてください：

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

私は

<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とHTMLをeddited

Answer 2

、またこれを試してみてください。

.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>と.myhrが何であったかわかりませんでしたので、両方の列にまたがると思いました。 .leftboxと.rightboxにdisplay: table-cellを使用し、.mainboxdisplay: tableを作成し、table-layout: fixedを追加しました。長さが意味をなさないようにしました。

Reference

Fiddle

スニペット

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