如何为输入字段提供完整的宽度和高度

时间:2019-04-25 05:26:15

标签: html css css3 html-table

我正在处理一个HTML表,其中的某些cells类型为input field,所以我的问题是输入字段的单元格宽度和高度不完整,这导致了我是因为我的表有很多行,我必须在单个页面上显示最大数据。

这是因为输入字段在表格单元格td内未完全调整,我必须从侧面增加一些高度以增加我不需要的输入字段的大小

代码

table {
  border-collapse: separate !important;
}

td input {
  width: 100%;
}

table.table-bordered>thead>tr>th {
  border: 1px solid white;
  white-space: nowrap;
  font-family: Verdana;
  font-size: 9pt;
  padding: 5px 5px 5px 5px;
  background-color: rgba(29, 150, 178, 1);
  font-weight: normal;
  text-align: center;
  color: white;
  transform: translateY(-4px);
}


/* background-color: #00998C */

table.table-bordered>tbody>tr>td {
  border: 1px solid rgba(29, 150, 178, 1);
  white-space: nowrap;
  font-family: Verdana;
  font-size: 8pt;
  background-color: rgba(84, 83, 72, .1);
  padding: 5px 5px 5px 5px;
  color: black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container ">
  <div class="row">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Name</th>
          <th>DOB</th>
          <th>AGE</th>
          <th>Occupation</th>
          <th>Address</th>
        </tr>
      </thead>
      <tbody>
        <tr>

          <td><input type="text"></td>
          <td><input type="text"></td>
          <td>22</td>
          <td>govt. employ</td>
          <td><input type="text"></td>



        </tr>

      </tbody>

    </table>

  </div>
</div>

因此,我该如何完全调整表格单元格内的输入字段,使其具有与表格单元格td相同的全高和全高

3 个答案:

答案 0 :(得分:1)

将td填充设置为0,

    MERGE INTO tbl_report_active_users AS target 
using (SELECT p.protocolcommandid, 
              p.transactionid, 
              p.bytestransferred, 
              CONVERT(DATE, p.time_stamp) AS DayOfRecord, 
              p.sitename, 
              p.username 
       FROM   tbl_protocolcommands p) AS source
        (protocolcommandid, 
       transactionid, bytestransferred, dayofrecord, sitename, username) 

ON ( target.dayofrecord = source.dayofrecord 
     AND target.sitename = source.sitename 
     AND target.username = source.username ) 
WHEN matched THEN 
  UPDATE SET bytestransferred = target.bytestransferred 
                                + source.bytestransferred, 
             connections = target.connections + CASE WHEN 
                           source.protocolcommandid = (SELECT 
                           Min(p.protocolcommandid) FROM tbl_protocolcommands p 
                           --INNER JOIN 
                           --tbl_authentications a 
                           --ON a.transactionid = p.transactionid 
                            WHERE 
                           p.transactionid = 
                           source.transactionid 
                           --AND a.resultid=0
                            GROUP BY 
                           p.transactionid ) 
                           THEN 1 ELSE 0 END 
WHEN NOT matched THEN 
  INSERT (dayofrecord, 
          sitename, 
          username, 
          connections, 
          bytestransferred) 
  VALUES (source.dayofrecord, 
          source.sitename, 
          source.username, 
          1, 
          source.bytestransferred); 

答案 1 :(得分:0)

您可以将padding设置为0

padding: 0px 0px 0px 0px;

答案 2 :(得分:-1)

please replace container class to container-fluid