Wed, 2022-12-28 21:05
Hi Experts,
I have an issue with width, the fetched data look compressed as it should be stretched along the page.
please take a look.
My css:
/* reset */ * { border: 0; box-sizing: content-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; list-style: none; margin: 0; padding: 0; text-decoration: none; vertical-align: top; } .title { letter-spacing: 5px; font-weight: bold; font-size: 17px; padding-bottom: 8px; } /* content editable */ *[contenteditable] { border-radius: 0.25em; min-width: 2em; outline: 0; } *[contenteditable] { cursor: pointer; } *[contenteditable]:hover, *[contenteditable]:focus, td:hover *[contenteditable], td:focus *[contenteditable], img.hover { background: #DEF; box-shadow: 0 0 1em 0.5em #DEF; } span[contenteditable] { display: inline-block; } /* heading */ h1 { font: bold 100% sans-serif; letter-spacing: 0.5em; text-align: center; text-transform: uppercase; } .makeitbold { font-weight: bold; font-size: 16.5px; } /* table */ table { font-size: 75%; table-layout: fixed; width: 100%; } table { border-collapse: separate; border-spacing: 2px; } th, td { border-width: 1px; padding: 0.5em; position: relative; text-align: left; } th, td { border-radius: 0.25em; border-style: solid; } th { background: #EEE; border-color: #BBB; } td { border-color: #DDD; } /* page */ html { font: 17px/1 'Open Sans', sans-serif; overflow: auto; padding: 0.5in; } html { background: #999; cursor: default; } body { box-sizing: border-box; height: 11in; margin: 0 auto; overflow: hidden; padding: 0.5in; max-width: 8.5in; } body { background: #FFF; border-radius: 1px; box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); } /* header */ header { margin: 0 0 3em; } header:after { clear: both; content: ""; display: table; } header h1 { background: #000; border-radius: 0.25em; color: #FFF; margin: 0 0 1em; padding: 0.5em 0; } header address { float: left; font-size: 75%; font-style: normal; line-height: 1.25; margin: 0 1em 1em 0; } header address p { margin: 0 0 0.25em; } header span, header img { display: block; float: right; } header span { margin: 0 0 1em 1em; max-height: 25%; max-width: 60%; position: relative; } header img { max-height: 100%; max-width: 100%; } header input { cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; } /* article */ article, article address, table.meta, table.inventory { margin: 0 0 3em; } article:after { clear: both; content: ""; display: table; } article h1 { clip: rect(0 0 0 0); position: absolute; } article address { float: left; font-size: 125%; font-weight: bold; } /* table meta & balance */ table.meta, table.balance { float: left; width: 45%; font-weight: bold; } table.meta:after, table.balance:after { clear: both; content: ""; display: table; } /* table meta */ table.meta th { width: 300%; float:left; } table.meta td { width:200px; } /* table items */ table.inventory { clear: both; width: 100%; } table.inventory th { font-weight: bold; text-align: center; } table.inventory td:nth-child(1) { width: 30%; } table.inventory td:nth-child(2) { width: 10%; text-align: center; } table.inventory td:nth-child(3) { text-align: center; width: 17%; } table.inventory td:nth-child(4) { text-align: center; width: 17%; } table.inventory td:nth-child(5) { text-align: center; width: 8%; } /* table balance */ table.balance th, table.balance td { width: 100%; } table.balance td { text-align: right; } .stamp2 { float:right; } /* aside */ aside h1 { border: none; border-width: 0 0 1px; margin: 0 0 1em; } aside h1 { border-color: #999; border-bottom-style: solid; }
I believe the issue is within these lines:
table.meta td { width:200px; }
Wed, 2022-12-28 21:07
#1
Link to the screenshot
Link to the screenshot