HTML：表格设计无法正常工作

Question

我正在尝试在HTML中实现以下格式设计。我尝试在TD中使用多个TR但是我没有成功地获得以下设计。

请找到我一直在尝试的以下代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以尝试这样的事情。我使用table和css来设置它们的样式。

＆＃13;

＆＃13;

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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这有用。

Answer 2

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

良好的设置将是

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