Shirish Shirish - 2 months ago 9
CSS Question

HTML: Table design not working properly

I am trying to achieve the below format design in

HTML
. I tried using multiple TR inside TD but i was not successful in getting the below design.

Design

Please find the below code i have been trying:



#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

Well you can try something like this. I used table and css to style them.

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>

Hope this was helpful.