如何修复表格中的对齐问题以符合材料设计指南？

Question

在https://material.io/guidelines/components/data-tables.html#data-tables-specs，有关于如何进行适当的柱填充的建议。

见下面

我正在使用materializecss v0.100.2来设置带有复选框的数据表。现在看起来像这样。

这是我迄今为止所做的工作。

https://codepen.io/tj_simmons/pen/OzyapG

/**
 * start of responsive side menu
 */
jQuery(function($) {
  $(".button-collapse").sideNav();
});
/**
 * end of responsive side menu
 */
/**
 * start of checkbox-table
 */
jQuery(function($) {
  $("td input[type=checkbox]").on('change', function (e) {
    console.log('change');
    row = $(this).closest('tr');
    console.log(row);
    console.log($(this).is(':checked'));
    if ($(this).is(':checked')) {
        row.addClass('selected');
    } else {
        row.removeClass('selected');
    }
  });
});
/**
 * end of checkbox 
 */

/**
 * start of responsive-side-menu
 */
/**
 * Body CSS
 */

html,
body {
  height: 100%;
  background-color: #eee;
}

html,
body,
input,
textarea,
buttons {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}


/**
 * Layout CSS
 */

 header, main, footer {
   padding-left: 300px;
 }

 /**
  * fix the left align for brand-logo
  */
 nav {
   width: calc(100% - 300px);
 }

 @media only screen and (max-width : 992px) {
   header, main, footer {
     padding-left: 0;
   }
   nav {
     width: 100%;
   }
 }


/**
 * helper Classes
 */
.no-margin {
  margin: 0px !important;
}
/**
 * end of responsive-side-menu
 */
/**
 * start of checkbox-color
 */
.checkbox-pink[type="checkbox"] + label:before{
  background: transparent;
}
.checkbox-pink[type="checkbox"]:checked + label:before{
  border: 2px solid transparent;
  border-bottom: 2px solid #ec407a;
  border-right: 2px solid #ec407a;
  background: transparent;
}
.checkbox-pink.filled-in[type="checkbox"] + label:after{
  background: transparent;
}
.checkbox-pink.filled-in[type="checkbox"]:checked + label:after{
  background: #ec407a;
  border: 2px solid #ec407a;
}
.checkbox-pink.filled-in[type="checkbox"]:checked + label:before{
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
/**
 * end of checkbox color
 */
/**
 * start of table colors
 */
/**
 * because certain materializecss does not abide by material.io guidelines
 * See https://material.io/guidelines/components/data-tables.html#data-tables-interaction
 * and https://github.com/Dogfalo/materialize/issues/2262
 */
 table.striped > tbody > tr:nth-child(odd) {
   background-color: #eeeeee !important;
 }

 table.highlight > tbody > tr:hover {
   background-color: #eeeeee !important;
 }

 table > tbody > tr.selected {
   background-color: #F5F5F5 !important;
}
/**
 * end of table colors
 */

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

  <header>
        <div class="navbar-fixed">
          <nav class="blue" role="navigation">
              <div class="nav-wrapper container">
                <a href="!#" data-activates="nav-mobile" class="button-collapse left no-margin"><i class="material-icons">menu</i></a>
                <a class="brand-logo">Logo</a>
                <ul class="right hide-on-med-and-down">
                    <li><a id="" href="#">Link</a></li>
                    <li><a id="" href="#">Link</a></li>
                    <li><a href="#" target="_blank">Link</a></li>
                    <li><a href="#" target="_blank">Link</a></li>
                </ul>
              </div>
          </nav>
        </div>
        <ul id="nav-mobile" class="side-nav fixed">
            <li><a id="" href="#">Link</a></li>
            <li><a id="" href="#">Link</a></li>
            <li><a href="#" target="_blank">Link</a></li>
            <li><a href="#" target="_blank">Link</a></li>
        </ul>
      </header>
      <main>
        <div class="container">

          <div class="section">
            <h3 class="blue-text">Table with checkbox</h3>
            <div class="row">
              <div class="col s12" class="flow-text">
                <div class="card-panel">
                  <table class="highlight">
                    <thead>
                      <tr>
                          <th class="valign-wrapper">
                            <input type="checkbox" class="filled-in checkbox-pink" id="all" />
                            <label for="all"></label>
                          </th>
                          <th>Name</th>
                          <th>Item Name</th>
                          <th>Item Price</th>
                      </tr>
                    </thead>

                    <tbody>
                      <tr>
                        <td class="valign-wrapper">
                          <input type="checkbox" class="filled-in checkbox-pink" id="checkbox1" />
                          <label for="checkbox1"></label>
                        </td>
                        <td>Alvin</td>
                        <td>Eclair</td>
                        <td>$0.87</td>
                      </tr>
                      <tr>
                        <td class="valign-wrapper">
                          <input type="checkbox" class="filled-in checkbox-pink" id="checkbox2" />
                          <label for="checkbox2"></label>
                        </td>
                        <td>Alan</td>
                        <td>Jellybean</td>
                        <td>$3.76</td>
                      </tr>
                      <tr>
                        <td class="valign-wrapper">
                          <input type="checkbox" class="filled-in checkbox-pink" id="checkbox3" />
                          <label for="checkbox3"></label>
                        </td>
                        <td>Jonathan</td>
                        <td>Lollipop</td>
                        <td>$7.00</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

        </div>
      </main>


      <footer class="page-footer blue">
        <div class="container">
          <div class="row">
            <div class="col l6 s12">
              <h5 class="white-text">Footer Content</h5>
              <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
            </div>
            <div class="col l4 offset-l2 s12">
              <h5 class="white-text">Links</h5>
              <ul>
                <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
                <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
                <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
                <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="footer-copyright">
          <div class="container">
          Made with ♥ by BusinessCoder
          <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
          </div>
        </div>
      </footer>

帮助我理解如何实现指南所要求的。

我是眼球，但看起来我的填充列不正确。

如何检查我是否正确确认填充标准以及如何更正？

Answer 1

由于您在布局中使用HTML表格，因此您的列都是<td>元素。现在，看起来每个<td>的内部只有5px的填充，每列之间总共有10px。

也许您可以尝试将填充增加到大于56dp的像素量，以满足列之间空间的最小要求。

复选框<td>单元格也可能需要更多填充，以便复选框的高度不大于父级高度的75％（18db为24db）。