Relocated Tables

How can I create a table that looks consistent? <a href="https://paste.anzah.network/paeajibah/kek9un" rel="nofollow">https://paste.anzah.network/paeajibah/kek9un</a>

This is two table-like doohickeys. Basically, you have to make sure the width of the cells in the upper table match the width of the lower table.&nbsp; Some options: Actual Tables A tightly controlled &lt;table&gt; can do it, but this can be troublesome and annoying.&nbsp; And the not the best practice.&nbsp; Better to use the following options. Controlled &lt;div&gt; s Decently controlled &lt;div&gt; can do it, akin to what you are doing.&nbsp; I can't see you css so I don't know.&nbsp; A good place to look at this is the html and css of the Warhammer 40k Roleplay sheets.&nbsp; The&nbsp; &lt;div class="row"&gt; control the row's height, and the &lt;div class="item"&gt; controls the cell width. Example html:&nbsp; &lt;div class="row"&gt; &nbsp; &nbsp; &lt;div class="cell short"&gt;&lt;/div&gt; &nbsp; &nbsp; &lt;div class="cell short"&gt;&lt;/div&gt; &nbsp; &nbsp; &lt;div class="cell short"&gt;&lt;/div&gt; &lt;/div&gt; Example css: .charsheet .sheet-row { height: 24px; margin: 2px 0px 2px; } .charsheet .sheet-item { display: inline-block; width: 100%; height: 28px; vertical-align: middle; margin: 0 -2px; text-align: left; padding: 3px 2px; } .charsheet .sheet-item.sheet-short { width: 30px; } .charsheet .sheet-item.sheet-medium { width: 100px; } Grids Grids can also do wonders.&nbsp; And once you get used to them, they are super easy. Edit : I don't have any formal training in coding, so my terminology is likely very wrong.&nbsp; And I can almost garentee there are other was to do this.

My problem is as soon as I put something in this "&lt;fieldset class="repeating" it is displaced, no matter what I do.

What is you css?

<a href="https://paste.anzah.network/pnrpzita6/kznsfz" rel="nofollow">https://paste.anzah.network/pnrpzita6/kznsfz</a> and here the attempt with the grid <a href="https://paste.anzah.network/pwjgsfevz/yihday" rel="nofollow">https://paste.anzah.network/pwjgsfevz/yihday</a> <a href="https://paste.anzah.network/pfgweclzr/jn40an" rel="nofollow">https://paste.anzah.network/pfgweclzr/jn40an</a>

This below.&nbsp; I added hard coded widths to the tableHeadSkill, etc. classes HTML &lt;div class="sheet-container"&gt; &nbsp; &nbsp; &lt;div class="sheet-float sheet-full sheet-skills"&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-header"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;Fertigkeiten&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-table"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableBody"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableRow"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableHeadSkill"&gt;Fertigkeit&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableHeadAtt"&gt;Attr.&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableHeadValue"&gt;Wert&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableHeadValue"&gt;MOD&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableHeadRoll"&gt;Roll&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableRow"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableCellSkill"&gt;Armbrust&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableCellAtt"&gt;Fe&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableCellValue"&gt;&lt;input name="attr_armbrust" type="number" value="0" /&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableCellValue"&gt;&lt;input name="attr_armbrust_mod" type="number" value="0" /&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableCellRoll"&gt;&lt;button name="roll_armbrust" type="roll" value="@{abilityroll} schießt mit der Armbrust mit dem Ergebniss [[(@{fe}+@{armbrust}+@{armbrust_mod})d10!!sdkh@{fe} + ?{Modifier?|0}]]"&gt;&lt;/button&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;fieldset class="repeating_basicskills"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableBody"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableRow"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableCellSkill"&gt;&lt;input class="sheet-sheet-baseinfo" type="text" name="attr_skillname" /&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableCellAtt"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select name="attr_attribut" class="sheet-charaselect"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="@{Na}"&gt;Nahkampf&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="@{Fe}"&gt;Fernkampf&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="@{Ge}"&gt;Geschick&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="@{Wa}"&gt;Wahrnehmung&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="@{Ko}"&gt;Konstitution&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="@{in}"&gt;Intelligenz&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="@{Wi}"&gt;Wissen&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="@{Ca}"&gt;Charisma&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableCellValue"&gt;&lt;input type="number" name="attr_skill" value="0" /&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableCellValue"&gt;&lt;input type="number" name="attr_skill_mod" value="0" /&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-tableCellRoll"&gt;&lt;button type="roll" name="roll_skill" value="@{abilityroll} würfelt @{skillname} mit dem Ergebniss [[(@{attribut}+@{skill}+@{skill_mod})d10!!sdkh@{attribut} + ?{Modifier?|0}]]"&gt;&lt;/button&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/fieldset&gt; &nbsp; &nbsp; &lt;/div&gt; &lt;/div&gt; CSS /* Tabelle */ .sheet-container .sheet-table { display: table; } .sheet-container .sheet-tableBody { display: table-row-group; } .sheet-container .sheet-tableRow { display: table-row; } .sheet-container .sheet-tableHeadSkill, .sheet-container .sheet-tableHeadAtt, .sheet-container .sheet-tableHeadValue, .sheet-container .sheet-tableHeadRoll, .sheet-container .sheet-tableCellSkill, .sheet-container .sheet-tableCellAtt, .sheet-container .sheet-tableCellValue, .sheet-container .sheet-tableCellRoll { border: 1px solid #999999; display: table-cell; padding: 3px 10px; } .sheet-container .sheet-tableRow .sheet-tableHeadSkill, .sheet-container .sheet-tableRow .sheet-tableCellSkill { &nbsp; &nbsp; width:215px; } .sheet-container .sheet-tableHeadSkill input[type="text"], .sheet-container .sheet-tableCellSkill input[type="text"] { &nbsp; &nbsp; width:100%; } .sheet-container .sheet-tableHeadAtt, .sheet-container .sheet-tableHeadValue, .sheet-container .sheet-tableHeadRoll, .sheet-container .sheet-tableCellAtt, .sheet-container .sheet-tableCellValue, .sheet-container .sheet-tableCellRoll { &nbsp; &nbsp; width:120px; } select.sheet-charaselect { &nbsp; &nbsp; width:100%; } .sheet-container .sheet-tableHeadSkill, .sheet-container .sheet-tableHeadAtt, .sheet-container .sheet-tableHeadValue, .sheet-container .sheet-tableHeadRoll { background-color: #EEE; font-weight: bold; } .sheet-container .sheet-tableHeadSkill, .sheet-container .sheet-tableHeadAtt, .sheet-container .sheet-tableHeadValue, .sheet-container .sheet-tableHeadRoll, .sheet-container .sheet-tableCellAtt { text-align: center; }

A broad in percent doesn't bring me as much as I need it in absolute numbers, but I've solved it that way now: HTML: &lt;div class="sheet-grid"&gt; &lt;div class="sheet-tableHeadSkill"&gt;Fertigkeit&lt;/div&gt; &lt;div class="sheet-tableHeadAtt"&gt;Attr.&lt;/div&gt; &lt;div class="sheet-tableHeadValue"&gt;Wert&lt;/div&gt; &lt;div class="sheet-tableHeadValue"&gt;MOD&lt;/div&gt; &lt;div class="sheet-tableHeadRoll"&gt;Roll&lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-gridplace"&gt; &lt;fieldset class="repeating_basicskills"&gt; &lt;div class="sheet-tableCellSkill"&gt;&lt;input class="sheet-sheet-baseinfo" type="text" name="attr_skillname" /&gt;&lt;/div&gt; &lt;div class="sheet-tableCellAtt"&gt; &nbsp; &lt;select name="attr_attribut" class="sheet-charaselect"&gt; &nbsp; &lt;option value="@{Na}"&gt;Nahkampf&lt;/option&gt; &nbsp; &lt;option value="@{Fe}"&gt;Fernkampf&lt;/option&gt; &nbsp; &lt;option value="@{Ge}"&gt;Geschick&lt;/option&gt; &nbsp; &lt;option value="@{Wa}"&gt;Wahrnehmung&lt;/option&gt; &nbsp; &lt;option value="@{Ko}"&gt;Konstitution&lt;/option&gt; &nbsp; &lt;option value="@{in}"&gt;Intelligenz&lt;/option&gt; &nbsp; &lt;option value="@{Wi}"&gt;Wissen&lt;/option&gt; &nbsp; &lt;option value="@{Ca}"&gt;Charisma&lt;/option&gt; &nbsp; &lt;/select&gt; &lt;/div&gt; &lt;div class="sheet-tableCellValue"&gt;&lt;input type="number" name="attr_skill" value="0" /&gt;&lt;/div&gt; &lt;div class="sheet-tableCellValue"&gt;&lt;input type="number" name="attr_skill_mod" value="0" /&gt;&lt;/div&gt; &lt;div class="sheet-tableCellRoll"&gt;&lt;button type="roll" name="roll_skill" value="@{abilityroll} würfelt @{skillname} mit dem Ergebniss [[(@{attribut}+@{skill}+@{skill_mod})d10!!sdkh@{attribut} + ?{Modifier?|0}]]"&gt;&lt;/button&gt;&lt;/div&gt; &lt;/fieldset&gt; &lt;/div&gt; CSS: /* Tabelle */ .sheet-container .sheet-grid, .sheet-container .sheet-gridplace .repcontainer .repitem { display: grid; grid-template-columns: 517px 155px 75px 75px 55px; grid-gap: 5px; } I noticed that the fieldset creates its own div container.

You got it then?&nbsp; Very cool

Yes I just didn't know that roll20 adds another div under the fieldset, so the css settings didn't work.