如何使带有表单元素的物化表更紧凑答案

【问题标题】：How to make materialize table with form elements more compact如何使带有表单元素的物化表更紧凑
【发布时间】：2019-11-11 05:41:44
【问题描述】：

我正在使用带有单元格中表单元素的 materiailze CSS 编写时间表表格。我不喜欢表格行的高度。有什么办法可以让桌子更紧凑？如果这是物化的限制，那么更好的 CSS 框架选项是什么？

    <head>
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </head>
    <body>
      <form>
      <table>
        <col width=100>
        <col width=100>
        <col width=100>
        <col width=100>
        <col width=200>
        <thead>
          <tr>
              <th>Date</th>
              <th>Time</th>
              <th>Date</th>
              <th>Time</th>
              <th>Type</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="date" name="day" value="2019-01-01"></td>
            <td><input type="time" name="day" value="10:00"></td>
            <td><input type="date" name="day" value="2019-01-01"></td>
            <td><input type="time" name="day" value="18:30"></td>
            <td>
                <select>
                  <option value=1>Regular shift</option>
                  <option value=2>Vacation</option>
                </select>
            </td>
            <td><input name="day"></td>
          </tr>
        </tbody>
      </table>
      </form>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>

【问题讨论】：

标签： html css forms materialize

【解决方案1】：

这只是一个小的 CSS 修复...

例如，您可以添加这段代码：

<style>
td {padding: 2px 5px;}
td input{margin:0 !important;height:2em !important;}
td .select-wrapper input.select-dropdown{height:2em;line-height:2em;}
</style>

【讨论】：