箇条書きリストでテーブル行を作る

箇条書きリストの作成

HTML ソースの編集

メモ: ここでは「4列のテーブル」という意味で「table4cols」というクラス名を付けますが、必要に応じて適当にクラス名を変更してください。

注意: 投稿済みの段落には、段落の ID が traction_rs="[[ID]]" という形で挿入されています。これは削除しないでください。削除すると、投稿時に段落の ID が変わり、登録済みの段落コメントや段落タスクなどが表示されなくなってしまいます。

箇条書きリストのデザインを変更する

ul.table4cols {
  display: table;
  width: 100%;
  border: 1px #ccc solid;
  border-collapse: collapse;
  margin: 0 !important;
}

ul.table4cols li {
  display: table-cell;
  padding: 4px;
  border: 1px #ccc solid;
}

ul.table4cols li:nth-child(1) {
  font-weight: bold;
  width: 30%;
  background-color: #f8f8f8;
}

ul.table4cols li:nth-child(2), ul.table4cols li:nth-child(3), ul.table4cols li:nth-child(4) {
  width: 20%;
}

関連記事