Как сделать материализованный стол с элементами формы более компактным - PullRequest
Новая
       13

Как сделать материализованный стол с элементами формы более компактным

0 голосов
/ 11 ноября 2019

Я кодирую таблицу расписания, используя 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>

1 Ответ

0 голосов
/ 11 ноября 2019

Это просто небольшое исправление 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>
...