HTML: Дизайн стола не работает должным образом

Question

Я пытаюсь достичь формата нижеуказанного формата в HTML. Я попытался использовать несколько TR внутри TD, но мне не удалось получить нижеследующий дизайн.

Пожалуйста, найдите ниже код я пытался:

#content { 
 
    position: absolute; 
 
    top: 110px; 
 
    left: 350px; 
 
    width: 775px; 
 
    height: 605px; 
 
} 
 
#content label { 
 
    display: block; 
 
    float: left; 
 
    margin-right: 4px; 
 
    vertical-align: top; 
 
}

<div id="content"> 
 
    <label> 
 

 
    Date Range 
 
    </label> 
 
    <label> 
 
    (Past) 
 
    <br /> 
 
    <input id="myDatePast" type="text" style="width:31px;" /> 
 
    </label> 
 

 
    <label> 
 
    (Future) 
 
    <br /> 
 
    <input id="myDateFuture" type="text" style="width:31px;" /> 
 
    </label> 
 

 
    <label> 
 
    <br />Total 
 
    <input id="myDateFuture" type="text" style="width:31px;" />Days 
 
    </label> 
 
</div>

Answer 1

Ну вы можете попробовать что-то вроде этого. Я использовал table и css, чтобы их стиль.

table { 
 
    border: 1px solid #666; 
 
    border-collapse: collapse; 
 
} 
 

 
th,tr {width: 150px;} 
 

 
th input {width: 50px;} 
 

 
.th1-main { 
 
    border-right: 1px solid #666; 
 
} 
 

 
.th1-modify {margin-left: 60px;} 
 

 
.th1-modify2 {margin-right: 60px;}

<div id="content"> 
 

 
<table> 
 
<tr> 
 
    <th class="th1-main"> 
 
    <span class="th1-modify">Date</span> <br> 
 
    <span class="th1-modify2">Range</span> 
 
    </th> 
 

 
    <th> 
 
    Past<br> 
 
    <input type="text" value="60"><br> 
 
    Date 
 
    </th> 
 
    
 
    <th> 
 
    Future<br> 
 
    <input type="text" value="360"><br> 
 
    Date 
 
    </th> 
 
    
 
    <th> 
 
    Total - <input type="text" value="420"> days 
 
    </th> 
 
</tr> 
 

 
</table> 
 

 
</div>

Надеется, что это было полезно.

Answer 2

Хорошая установка будет

<table> 
<tr> 
<td>2</td><td>2</td> 
</tr> 

<tr> 
<td>3</td><td>4</td> 
</tr> 

<tr> 
<td>5</td><td>6</td> 
</tr> 

</table> 

Answer 3

table,#cell1{ 
 
border:2px solid gray; 
 
border-collapse: collapse; 
 
} 
 
#total{ 
 
    width:auto;height:50px; 
 
} 
 
#cell1{ 
 
width:100px; 
 
    height:75px; 
 
} 
 
td:not(.empty){ 
 
    width:100px; 
 
    height:50px; 
 
}

<div id="content"> 
 
    <table> 
 
    <tr> 
 
     <td id="cell1"> 
 
     <span style="float:right"><b>Date</b></span><br/><br/> 
 
     <span style="float:left"><b>Range</b></span> </td> 
 
     <td class="empty"></td> 
 
    <td> 
 
     
 
    (Past) 
 
    <br/> 
 
    <input id="myDatePast" type="text" value="60" style="width:31px;" /><br/><b>Date</b> 
 
</td> 
 
    <td> 
 
    (Future)<br/> 
 
    <input id="myDateFuture" type="text" value="360" style="width:31px;" /><br/><b>Date</b> 
 
    </td> 
 
     <td id="total"> 
 
    Total- 
 
    <input id="myDateFuture" type="text" value="420" style="width:31px;"/><b> Days</b> 
 
     </td> 
 
    </table> 
 
</div>