Pattern Library by Cloudy knot

Table 

<main class="main-wrapper">
    <h2 class="heading2">Basic Table</h2>
    <div class="table-scroll">
        <table class="table -text-center">
            <caption class="caption -center">標準的なtable表</caption>
            <thead>
                <tr>
                    <th>項目名1</th>
                    <th>項目名2</th>
                    <th>項目名3</th>
                    <th>項目名4</th>
                    <th>項目名5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>内容1-1</td>
                    <td>内容2-1</td>
                    <td>内容3-1</td>
                    <td>内容4-1</td>
                    <td>内容5-1</td>
                </tr>
                <tr>
                    <td>内容1-2</td>
                    <td>内容2-2</td>
                    <td>内容3-2</td>
                    <td>内容4-2</td>
                    <td>内容5-2</td>
                </tr>
                <tr>
                    <td>内容1-3</td>
                    <td>内容2-3</td>
                    <td>内容3-3</td>
                    <td>内容4-3</td>
                    <td>内容5-3</td>
                </tr>
                <tr>
                    <td>内容1-4</td>
                    <td>内容2-4</td>
                    <td>内容3-4</td>
                    <td>内容4-4</td>
                    <td>内容5-4</td>
                </tr>
                <tr>
                    <td>内容1-5</td>
                    <td>内容2-5</td>
                    <td>内容3-5</td>
                    <td>内容4-5</td>
                    <td>内容5-5</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="divider my32" role="separator"></div>
    <h2 class="heading2">Dual-axis Table</h2>
    <div class="table-scroll">
        <table class="table -text-center">
            <caption class="caption -right">縦横二軸のtable表</caption>
            <thead>
                <tr>
                    <th class="empty"></th>
                    <th>横軸・項目名1</th>
                    <th>横軸・項目名2</th>
                    <th>横軸・項目名3</th>
                    <th>横軸・項目名4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>縦軸・項目名1</th>
                    <td>内容1-1</td>
                    <td>内容2-1</td>
                    <td>内容3-1</td>
                    <td>内容4-1</td>
                </tr>
                <tr>
                    <th>縦軸・項目名2</th>
                    <td>内容1-2</td>
                    <td>内容2-2</td>
                    <td>内容3-2</td>
                    <td>内容4-2</td>
                </tr>
                <tr>
                    <th>縦軸・項目名3</th>
                    <td>内容1-3</td>
                    <td>内容2-3</td>
                    <td>内容3-3</td>
                    <td>内容4-3</td>
                </tr>
                <tr>
                    <th>縦軸・項目名4</th>
                    <td>内容1-4</td>
                    <td>内容2-4</td>
                    <td>内容3-4</td>
                    <td>内容4-4</td>
                </tr>
                <tr>
                    <th>縦軸・項目名5</th>
                    <td>内容1-5</td>
                    <td>内容2-5</td>
                    <td>内容3-5</td>
                    <td>内容4-5</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="divider my32" role="separator"></div>
    <h2 class="heading2">Head-sticky Table (Experimental)</h2>
    <div class="table-scroll sticky-box">
        <table class="table -text-right -head-sticky">
            <caption class="caption">項目固定のtable表</caption>
            <thead>
                <tr>
                    <th class="empty"></th>
                    <th>横軸・項目名1</th>
                    <th>横軸・項目名2</th>
                    <th>横軸・項目名3</th>
                    <th>横軸・項目名4</th>
                    <th>横軸・項目名5</th>
                    <th>横軸・項目名6</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>縦軸・項目名1</th>
                    <td>内容1-1</td>
                    <td>内容2-1</td>
                    <td>内容3-1</td>
                    <td>内容4-1</td>
                    <td>内容5-1</td>
                    <td>内容6-1</td>
                </tr>
                <tr>
                    <th>縦軸・項目名2</th>
                    <td>内容1-2</td>
                    <td>内容2-2</td>
                    <td>内容3-2</td>
                    <td>内容4-2</td>
                    <td>内容5-2</td>
                    <td>内容6-2</td>
                </tr>
                <tr>
                    <th>縦軸・項目名3</th>
                    <td>内容1-3</td>
                    <td>内容2-3</td>
                    <td>内容3-3</td>
                    <td>内容4-3</td>
                    <td>内容5-3</td>
                    <td>内容6-3</td>
                </tr>
                <tr>
                    <th>縦軸・項目名4</th>
                    <td>内容1-4</td>
                    <td>内容2-4</td>
                    <td>内容3-4</td>
                    <td>内容4-4</td>
                    <td>内容5-4</td>
                    <td>内容6-4</td>
                </tr>
                <tr>
                    <th>縦軸・項目名5</th>
                    <td>内容1-5</td>
                    <td>内容2-5</td>
                    <td>内容3-5</td>
                    <td>内容4-5</td>
                    <td>内容5-5</td>
                    <td>内容6-5</td>
                </tr>
                <tr>
                    <th>縦軸・項目名6</th>
                    <td>内容1-6</td>
                    <td>内容2-6</td>
                    <td>内容3-6</td>
                    <td>内容4-6</td>
                    <td>内容5-6</td>
                    <td>内容6-6</td>
                </tr>
                <tr>
                    <th>縦軸・項目名7</th>
                    <td>内容1-7</td>
                    <td>内容2-7</td>
                    <td>内容3-7</td>
                    <td>内容4-7</td>
                    <td>内容5-7</td>
                    <td>内容6-7</td>
                </tr>
            </tbody>
        </table>
    </div>
</main>
 
<main class="main-wrapper">
  <h2 class="heading2">Basic Table</h2>
  <div class="table-scroll">
    <table class="table -text-center">
      <caption class="caption -center">標準的なtable表</caption>
      <thead>
        <tr>
          <th>項目名1</th>
          <th>項目名2</th>
          <th>項目名3</th>
          <th>項目名4</th>
          <th>項目名5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>内容1-1</td>
          <td>内容2-1</td>
          <td>内容3-1</td>
          <td>内容4-1</td>
          <td>内容5-1</td>
        </tr>
        <tr>
          <td>内容1-2</td>
          <td>内容2-2</td>
          <td>内容3-2</td>
          <td>内容4-2</td>
          <td>内容5-2</td>
        </tr>
        <tr>
          <td>内容1-3</td>
          <td>内容2-3</td>
          <td>内容3-3</td>
          <td>内容4-3</td>
          <td>内容5-3</td>
        </tr>
        <tr>
          <td>内容1-4</td>
          <td>内容2-4</td>
          <td>内容3-4</td>
          <td>内容4-4</td>
          <td>内容5-4</td>
        </tr>
        <tr>
          <td>内容1-5</td>
          <td>内容2-5</td>
          <td>内容3-5</td>
          <td>内容4-5</td>
          <td>内容5-5</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="divider my32" role="separator"></div>
  <h2 class="heading2">Dual-axis Table</h2>
  <div class="table-scroll">
    <table class="table -text-center">
      <caption class="caption -right">縦横二軸のtable表</caption>
      <thead>
        <tr>
          <th class="empty"></th>
          <th>横軸・項目名1</th>
          <th>横軸・項目名2</th>
          <th>横軸・項目名3</th>
          <th>横軸・項目名4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>縦軸・項目名1</th>
          <td>内容1-1</td>
          <td>内容2-1</td>
          <td>内容3-1</td>
          <td>内容4-1</td>
        </tr>
        <tr>
          <th>縦軸・項目名2</th>
          <td>内容1-2</td>
          <td>内容2-2</td>
          <td>内容3-2</td>
          <td>内容4-2</td>
        </tr>
        <tr>
          <th>縦軸・項目名3</th>
          <td>内容1-3</td>
          <td>内容2-3</td>
          <td>内容3-3</td>
          <td>内容4-3</td>
        </tr>
        <tr>
          <th>縦軸・項目名4</th>
          <td>内容1-4</td>
          <td>内容2-4</td>
          <td>内容3-4</td>
          <td>内容4-4</td>
        </tr>
        <tr>
          <th>縦軸・項目名5</th>
          <td>内容1-5</td>
          <td>内容2-5</td>
          <td>内容3-5</td>
          <td>内容4-5</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="divider my32" role="separator"></div>
  <h2 class="heading2">Head-sticky Table (Experimental)</h2>
  <div class="table-scroll sticky-box">
    <table class="table -text-right -head-sticky">
      <caption class="caption">項目固定のtable表</caption>
      <thead>
        <tr>
          <th class="empty"></th>
          <th>横軸・項目名1</th>
          <th>横軸・項目名2</th>
          <th>横軸・項目名3</th>
          <th>横軸・項目名4</th>
          <th>横軸・項目名5</th>
          <th>横軸・項目名6</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>縦軸・項目名1</th>
          <td>内容1-1</td>
          <td>内容2-1</td>
          <td>内容3-1</td>
          <td>内容4-1</td>
          <td>内容5-1</td>
          <td>内容6-1</td>
        </tr>
        <tr>
          <th>縦軸・項目名2</th>
          <td>内容1-2</td>
          <td>内容2-2</td>
          <td>内容3-2</td>
          <td>内容4-2</td>
          <td>内容5-2</td>
          <td>内容6-2</td>
        </tr>
        <tr>
          <th>縦軸・項目名3</th>
          <td>内容1-3</td>
          <td>内容2-3</td>
          <td>内容3-3</td>
          <td>内容4-3</td>
          <td>内容5-3</td>
          <td>内容6-3</td>
        </tr>
        <tr>
          <th>縦軸・項目名4</th>
          <td>内容1-4</td>
          <td>内容2-4</td>
          <td>内容3-4</td>
          <td>内容4-4</td>
          <td>内容5-4</td>
          <td>内容6-4</td>
        </tr>
        <tr>
          <th>縦軸・項目名5</th>
          <td>内容1-5</td>
          <td>内容2-5</td>
          <td>内容3-5</td>
          <td>内容4-5</td>
          <td>内容5-5</td>
          <td>内容6-5</td>
        </tr>
        <tr>
          <th>縦軸・項目名6</th>
          <td>内容1-6</td>
          <td>内容2-6</td>
          <td>内容3-6</td>
          <td>内容4-6</td>
          <td>内容5-6</td>
          <td>内容6-6</td>
        </tr>
        <tr>
          <th>縦軸・項目名7</th>
          <td>内容1-7</td>
          <td>内容2-7</td>
          <td>内容3-7</td>
          <td>内容4-7</td>
          <td>内容5-7</td>
          <td>内容6-7</td>
        </tr>
      </tbody>
    </table>
  </div>
</main>
 
/* No context defined. */
  • Content: 
    table {
  border-top: solid 1px #bbb;
  border-left: solid 1px #bbb;
}

caption {
  margin: 0 0 .2rem;
  font-size: 1rem;
  font-weight: bold;
}

th,
td {
  padding: .75rem 1rem;
  border-right: solid 1px #bbb;
  border-bottom: solid 1px #bbb;
  vertical-align: top;
}
th p,
td p {
  font-size: 100%;
}
th .shortcut,
td .shortcut {
  margin-left: 0;
}

th {
  background: #efefef;
}

td {
  background: #fff;
}

.table-scroll {
  width: 100%;
  margin: auto;
  overflow: auto;
}
.table-scroll table {
  white-space: pre;
}
@media print, screen and (min-width:64.0625em) {
  .table-scroll table {
    table-layout: fixed;
  }
}

.table-text-center td {
  text-align: center;
}

.table-highlight td {
  background: #fffdc9;
}

.table-60 {
  width: 100%;
}
@media screen and (min-width: 840px) {
  .table-60 {
    width: 60%;
  }
}

.cell-left {
  text-align: left;
}

.cell-center {
  text-align: center;
}

.cell-right {
  text-align: right;
}
  • URL: /components/raw/table/style.css
  • Filesystem Path: src/components/1-static-ui/table/style.css
  • Size: 942 Bytes

No notes defined.