-1
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>私はガイドラインが求めているものを達成できる方法を理解するために私を助けて。
私は目を見張っていますが、列のパディングが正しくないようです。
パディングの基準と正しいことを確認する方法を確認するにはどうすればよいですか？
あなたは最も重要な部分を省いたようです：**それは何ですか**あなたは分かりませんか？ –
私は目を見張っていますが、パッドがガイドラインに準拠していないようです。 –
Materialize.css **はGoogleが開発したものではありません**。これは、[4人の生徒]（http://materializecss.com/about.html#team）によって開発されたマテリアルデザインのjQuery-ficationです。 MD原則（モーション、詩、意図、目的）に関して実際の取引をしたい場合は、[Angular Material]（https://material.angular.io/）を使用してください。 –