json-table-editor/dist/json-table-editor.min.css

JSON table editor is a minimal, yet flexible HTML table editor, where you can attach formatting to each cell and it gives you JSON output.

table.js-main-table{width:calc(100% - 68px);margin:10px 0;border-collapse:collapse;table-layout:fixed}table.js-main-table td{border:1px solid #a2a9b1;height:30px;outline:0;padding-left:5px;padding-right:5px}.jt-format-options button{margin:4px;font-size:16px;border:1px solid #e2e2e2;color:#000;border-radius:3px;cursor:pointer;padding:4px 7px;box-shadow:2px 2px 1px 0 rgba(0,0,0,.11);transition:.5s all;text-transform:capitalize;background-color:#fff}.jt-format-options button:hover{background:rgba(224,224,224,.5)}.jt-format-options button:disabled,.jt-format-options button[disabled]{opacity:.4}.jt-format-options span{padding-left:20px}.jt-format-options span button{margin-left:-4px;border-radius:0}.jt-format-options button.active{background:#e0e0e0}.jt-col-btn,.jt-row-btn{display:none}.jt-row-btn{float:right;position:relative;top:-45px;left:-46px}.jt-col-btn{float:left;position:relative;top:-3px}.jt-col-btn span,.jt-row-btn span{display:block;background-color:#dbeafd;text-align:center;cursor:pointer}.jt-col-btn span{height:14px}.jt-row-btn span{height:100%;width:14px}.jt-expand-options{position:absolute;border:1px solid #a2a9b1;border-radius:2px;box-shadow:0 2px 2px 0 rgba(0,0,0,.25);width:133px;background:#fff;z-index:100;display:none}.jt-row-btn .jt-expand-options{right:14px;bottom:50%;transform:translateY(50%);-webkit-transform:translateY(50%)}.jt-col-btn .jt-expand-options{bottom:14px;right:50%;transform:translateX(50%);-webkit-transform:translateX(50%)}.jt-col-btn.expand-options .jt-expand-options,.jt-row-btn.expand-options .jt-expand-options{display:block}.jt-expand-options button{margin:0;padding:7px;border:0;box-shadow:none;cursor:pointer;font-size:14px;font-family:sans-serif;font-weight:700;width:100%;height:40px;border-bottom:1px solid #eaecf1;background:#fff}.jt-left-arrow,.jt-up-arrow{border:solid #282c30;border-width:0 2px 2px 0;display:inline-block;padding:4px}.jt-up-arrow{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}.jt-left-arrow{position:relative;top:50%;left:3px;transform:translateY(-85%) rotate(135deg);-webkit-transform:translateY(-85%) rotate(135deg)}td.jt-cell-italic{font-style:italic}.jt-cell-large-font{font-size:x-large}.jt-cell-bold{font-weight:700}.jt-cell-bold{font-weight:700}.jt-cell-left{text-align:left}.jt-cell-right{text-align:right}.jt-cell-center{text-align:center}