0

I need to do few tables using display:table, and I trying get into BEM metodology the right way.

.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;
}
<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>
  1. I can't get tables 100% width of page,
  2. how to properly set margin-top different for every table with BEM,
  3. .sect1 .sect2 .sect3 - are they BEM blocks and should have b- class prefix, maybe for margin-top, 3a. what methods do you use to set many different margins between repeated same elements,
  4. is border and color should be modificators when all elements have the same properties?

P.S. i can't use table - in mobile i need different cell order and some of cell need to be expandable.

MikeLD
  • 3
  • 2

0 Answers0