GDL - Global Design Language

Table: Flotted 

<table>

    <thead>
        <tr>

            <th>candidato</th>

            <th>voti</th>

            <th>%</th>

        </tr>
    </thead>

    <tbody>

        <tr>

            <td>MICHETTI ENRICO</td>

            <td>332.13.00</td>

            <td>30,24</td>

        </tr>

        <tr>

            <td>MICHETTI ENRICO</td>

            <td>332.13.00</td>

            <td>30,24</td>

        </tr>

    </tbody>

    <tfoot>
        <tr>

            <td>candidato</td>

            <td>voti</td>

            <td>%</td>

        </tr>
    </tfoot>

</table>
 
<table>
  {% if contents.thed %}
  <thead>
  <tr>
    {% for row in contents.thed %}
    <th>{{ row }}</th>
    {% endfor %}
  </tr>
  </thead>
  {% endif %}
  {% if contents.tbody %}
	<tbody>
    {% for col in contents.tbody %}	
		<tr>
      {% for row in col %}
      <td>{{ row }}</td>
      {% endfor %}
		</tr>
    {% endfor %}
	</tbody>
  {% endif %}
  {% if contents.tfoot %}
  <tfoot>
		<tr>
      {% for row in contents.tfoot %}
      <td>{{ row }}</td>
      {% endfor %}
		</tr>
  </tfoot>
  {% endif %}
</table>
 
{
  "page": "",
  "contents": {
    "thed": [
      "candidato",
      "voti",
      "%"
    ],
    "tbody": [
      [
        "MICHETTI ENRICO",
        "332.13.00",
        "30,24"
      ],
      [
        "MICHETTI ENRICO",
        "332.13.00",
        "30,24"
      ]
    ],
    "tfoot": [
      "candidato",
      "voti",
      "%"
    ]
  }
}
  • Content: 
      // //
  // // Table
  // //

  table {
    width: 100%;
    margin: $margin-large 0;
    border-collapse: collapse;
    border: none;

    thead {
      background-color: $ui-05;
      text-align: left;
    }

    tr:nth-child(even) {
      background-color: var(--background-color-gray);
    }

    tbody:first-child {
      tr{
        &:nth-child(odd) {
          background-color: var(--background-color-gray);
        }
        &:nth-child(even) {
          background-color: var(--background-color-body);
        }

        &:first-child {
          background-color: $ui-05;
          
          td {
            border-bottom: 1px solid $ui-02;
            color: $text-01;
            @include type(label-04);
          }
        }

      }
    }

    th,
    td {
      padding: $padding-base;
    }

    th {
      border-bottom: 1px solid $ui-02;
      color: $text-01;
      @include type(label-04);
    }

    td {
      border-bottom: 1px solid var(--divider-color);
      color: $text-02;
      @include type(label-05);
    }
  }
  • URL: /components/raw/table/table.scss
  • Filesystem Path: src/lib/components/table/table.scss
  • Size: 1 KB

No notes defined.