Question

我需要使用display：table做几张桌子，我尝试以正确的方式进入BEM方法论。

＆＃13;

.b-table {
  dispay: table;
  width: 100%;
  font-family: arial, sans-serif;
}
.b-table__cell, .b-table__header {
  display: table-cell;
  text-align: left;
  padding: .6em;
}
.b-table__cell {
  border: 1px solid #ddd;
}
.b-table__cell--half-wide {
  width: 50%;
}
.b-table__cell--quarter-wide {
  width: 25%;
}
.b-table__header {
  background-color: orangered;
  border: 1px solid red;
}
.b-table__row {
  display: table-row;
  width: 100%;
}
.b-table__row:nth-child(even) {
  background-color: #eee;
}

＆＃13;

<section class="sect1">
  <div class="b-table">
    <div class="b-table__row">
      <div class="b-table__header b-table__cell--half-wide">Company</div>
      <div class="b-table__header b-table__cell--quarter-wide">Contact</div>
      <div class="b-table__header b-table__cell--quarter-wide">Country</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Alfreds Futterkiste</div>
      <div class="b-table__cell">Maria Anders</div>
      <div class="b-table__cell">Germany</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Centro comercial Moctezuma</div>
      <div class="b-table__cell">Francisco Chang</div>
      <div class="b-table__cell">Mexico</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Ernst Handel</div>
      <div class="b-table__cell">Roland Mendel</div>
      <div class="b-table__cell">Austria</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Island Trading</div>
      <div class="b-table__cell">Helen Bennett</div>
      <div class="b-table__cell">UK</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Laughing Bacchus Winecellars</div>
      <div class="b-table__cell">Yoshi Tannamuri</div>
      <div class="b-table__cell">Canada</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Magazzini Alimentari Riuniti</div>
      <div class="b-table__cell">Giovanni Rovelli</div>
      <div class="b-table__cell">Italy</div>
    </div>
  </div>
</section>

<section class="sect2">
  <div class="b-table">
    <div class="b-table__row">
      <div class="b-table__header b-table__cell--half-wide">Company</div>
      <div class="b-table__header b-table__cell--half-wide">Contact</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Alfreds Futterkiste</div>
      <div class="b-table__cell">Maria Anders</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Centro comercial Moctezuma</div>
      <div class="b-table__cell">Francisco Chang</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Ernst Handel</div>
      <div class="b-table__cell">Roland Mendel</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Island Trading</div>
      <div class="b-table__cell">Helen Bennett</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Laughing Bacchus Winecellars</div>
      <div class="b-table__cell">Yoshi Tannamuri</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Magazzini Alimentari Riuniti</div>
      <div class="b-table__cell">Giovanni Rovelli</div>
    </div>
  </div>
</section>

<section class="sect3">
  <div class="b-table">
    <div class="b-table__row">
      <div class="b-table__header b-table__cell--half-wide">Company</div>
      <div class="b-table__header b-table__cell--half-wide">Contact</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Alfreds Futterkiste</div>
      <div class="b-table__cell">Maria Anders</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Centro comercial Moctezuma</div>
      <div class="b-table__cell">Francisco Chang</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Ernst Handel</div>
      <div class="b-table__cell">Roland Mendel</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Island Trading</div>
      <div class="b-table__cell">Helen Bennett</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Laughing Bacchus Winecellars</div>
      <div class="b-table__cell">Yoshi Tannamuri</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Magazzini Alimentari Riuniti</div>
      <div class="b-table__cell">Giovanni Rovelli</div>
    </div>
  </div>
</section>

＆＃13;

我无法获得100％页面宽度的表格，
如何使用BEM为每个表正确设置margin-top不同，
.sect1 .sect2 .sect3 - 它们是BEM块，应该有b级前缀，可能是margin-top， 3A。你用什么方法在重复的相同元素之间设置许多不同的边距，
是边框，当所有元素具有相同的属性时，颜色应该是修饰符吗？

P.S。我不能使用table-in mobile我需要不同的单元格顺序，有些单元格需要可扩展。

显示：表格未获得100％宽度，表格使用BEM方法

0 个答案: