htmlcsscss-tables
Turning th text by 90 degrees results in far off text
i want to turn some headers of a table in my admin, but there is a css stylesheet that kind of comes with the system (I can easily add stuff though). To achieve this I created the rotate class but I cannot make it fit into a normal column (th).
This results in:
I want it to look like this:
But my current state has the second ("Hi") table header shifted into the first and the next ones accordingly. This way it consumes too much space and it looks really bad Also I want the headlines to vertically "stretch" the table head if needed.
@import url('https://fonts.googleapis.com/css2?family=B612:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* VARIABLE DEFINITIONS */
:root {
--primary: #727272;
--secondary: #8fb3e2;
--accent: #000000;
--primary-fg: #fff;
--body-fg: #333;
--body-bg: #fff;
--body-quiet-color: #666;
--body-loud-color: #000;
--header-color: #ffc;
--header-branding-color: var(--accent);
--header-bg: var(--secondary);
--header-link-color: var(--primary-fg);
--breadcrumbs-fg: #000000;
--breadcrumbs-link-fg: var(--body-bg);
--breadcrumbs-bg: var(--primary);
--link-fg: #292929;
--link-hover-color: #036;
--link-selected-fg: #5b80b2;
--hairline-color: #e8e8e8;
--border-color: #ccc;
--error-fg: #ba2121;
--message-success-bg: #dfd;
--message-warning-bg: #ffc;
--message-error-bg: #ffefef;
--darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
--selected-bg: #e4e4e4; /* E.g. selected table cells */
--selected-row: #ffc;
--button-fg: #fff;
--button-bg: var(--primary);
--button-hover-bg: #609ab6;
--default-button-bg: var(--secondary);
--default-button-hover-bg: #205067;
--close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
--close-button-hover-bg: #747474;
--delete-button-bg: #ba2121;
--delete-button-hover-bg: #a41515;
--object-tools-fg: var(--button-fg);
--object-tools-bg: var(--close-button-bg);
--object-tools-hover-bg: var(--close-button-hover-bg);
}
@media (prefers-color-scheme: dark) {
:root {
--primary: #264b5d;
--primary-fg: #eee;
--body-fg: #eeeeee;
--body-bg: #121212;
--body-quiet-color: #e0e0e0;
--body-loud-color: #ffffff;
--breadcrumbs-link-fg: #e0e0e0;
--breadcrumbs-bg: var(--primary);
--link-fg: #81d4fa;
--link-hover-color: #4ac1f7;
--link-selected-fg: #6f94c6;
--hairline-color: #272727;
--border-color: #353535;
--error-fg: #e35f5f;
--message-success-bg: #006b1b;
--message-warning-bg: #583305;
--message-error-bg: #570808;
--darkened-bg: #212121;
--selected-bg: #1b1b1b;
--selected-row: #00363a;
--close-button-bg: #333333;
--close-button-hover-bg: #666666;
}
}
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial,sans-serif;
color: var(--body-fg);
background: var(--body-bg);
}
/* LINKS */
a:link, a:visited {
color: var(--link-fg);
text-decoration: none;
transition: color 0.15s, background 0.15s;
}
a:focus, a:hover {
color: var(--link-hover-color);
}
a:focus {
text-decoration: underline;
}
a img {
border: none;
}
a.section:link, a.section:visited {
color: var(--header-link-color);
text-decoration: none;
}
a.section:focus, a.section:hover {
text-decoration: underline;
}
/* GLOBAL DEFAULTS */
p, ol, ul, dl {
margin: .2em 0 .8em 0;
}
p {
padding: 0;
line-height: 140%;
}
h1,h2,h3,h4,h5 {
font-weight: bold;
}
h1 {
margin: 0 0 20px;
font-weight: 300;
font-size: 20px;
color: var(--body-quiet-color);
}
h2 {
font-size: 16px;
margin: 1em 0 .5em 0;
}
h2.subhead {
font-weight: normal;
margin-top: 0;
}
h3 {
font-size: 14px;
margin: .8em 0 .3em 0;
color: var(--body-quiet-color);
font-weight: bold;
}
h4 {
font-size: 12px;
margin: 1em 0 .8em 0;
padding-bottom: 3px;
}
h5 {
font-size: 10px;
margin: 1.5em 0 .5em 0;
color: var(--body-quiet-color);
text-transform: uppercase;
letter-spacing: 1px;
}
ul > li {
list-style-type: square;
padding: 1px 0;
}
li ul {
margin-bottom: 0;
}
li, dt, dd {
font-size: 13px;
line-height: 20px;
}
dt {
font-weight: bold;
margin-top: 4px;
}
dd {
margin-left: 0;
}
form {
margin: 0;
padding: 0;
}
fieldset {
margin: 0;
min-width: 0;
padding: 0;
border: none;
border-top: 1px solid var(--hairline-color);
}
blockquote {
font-size: 11px;
color: #777;
margin-left: 2px;
padding-left: 10px;
border-left: 5px solid #ddd;
}
code, pre {
font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
color: var(--body-quiet-color);
font-size: 12px;
overflow-x: auto;
}
pre.literal-block {
margin: 10px;
background: var(--darkened-bg);
padding: 6px 8px;
}
code strong {
color: #930;
}
hr {
clear: both;
color: var(--hairline-color);
background-color: var(--hairline-color);
height: 1px;
border: none;
margin: 0;
padding: 0;
font-size: 1px;
line-height: 1px;
}
/* TEXT STYLES & MODIFIERS */
.small {
font-size: 11px;
}
.mini {
font-size: 10px;
}
.help, p.help, form p.help, div.help, form div.help, div.help li {
font-size: 11px;
color: var(--body-quiet-color);
}
div.help ul {
margin-bottom: 0;
}
.help-tooltip {
cursor: help;
}
p img, h1 img, h2 img, h3 img, h4 img, td img {
vertical-align: middle;
}
.quiet, a.quiet:link, a.quiet:visited {
color: var(--body-quiet-color);
font-weight: normal;
}
.clear {
clear: both;
}
.nowrap {
white-space: nowrap;
}
.hidden {
display: none;
}
/* TABLES */
table {
border-collapse: collapse;
border-color: var(--border-color);
}
td, th {
font-size: 13px;
line-height: 16px;
border-bottom: 1px solid var(--hairline-color);
vertical-align: top;
padding: 8px;
}
th {
font-weight: 600;
text-align: left;
}
div.rotate {
/* all: revert; */
vertical-align: bottom;
/* position: relative; */
transform: rotate(-90deg);
width: 20px;
max-width: 20px;
height: 80px;
max-height: 80px;
background: var(--darkened-bg);
}
thead th,
tfoot td {
color: var(--body-quiet-color);
padding: 5px 10px;
font-size: 11px;
background: var(--body-bg);
border: none;
border-top: 1px solid var(--hairline-color);
border-bottom: 1px solid var(--hairline-color);
}
tfoot td {
border-bottom: none;
border-top: 1px solid var(--hairline-color);
}
thead th.required {
color: var(--body-loud-color);
}
tr.alt {
background: var(--darkened-bg);
}
tr:nth-child(odd), .row-form-errors {
background: var(--body-bg);
}
tr:nth-child(even),
tr:nth-child(even) .errorlist,
tr:nth-child(odd) + .row-form-errors,
tr:nth-child(odd) + .row-form-errors .errorlist {
background: var(--darkened-bg);
}
/* SORTABLE TABLES */
thead th {
padding: 5px 10px;
line-height: normal;
text-transform: uppercase;
background: var(--darkened-bg);
}
thead th a:link, thead th a:visited {
color: var(--body-quiet-color);
}
thead th.sorted {
background: var(--selected-bg);
}
thead th.sorted .text {
padding-right: 42px;
}
table thead th .text span {
padding: 8px 10px;
display: block;
}
table thead th .text a {
display: block;
cursor: pointer;
padding: 8px 10px;
}
table thead th .text a:focus, table thead th .text a:hover {
background: var(--selected-bg);
}
thead th.sorted a.sortremove {
visibility: hidden;
}
table thead th.sorted:hover a.sortremove {
visibility: visible;
}
table thead th.sorted .sortoptions {
display: block;
padding: 9px 5px 0 5px;
float: right;
text-align: right;
}
table thead th.sorted .sortpriority {
font-size: .8em;
min-width: 12px;
text-align: center;
vertical-align: 3px;
margin-left: 2px;
margin-right: 2px;
}
table thead th.sorted .sortoptions a {
position: relative;
width: 14px;
height: 14px;
display: inline-block;
background: url(../img/sorting-icons.svg) 0 0 no-repeat;
background-size: 14px auto;
}
table thead th.sorted .sortoptions a.sortremove {
background-position: 0 0;
}
table thead th.sorted .sortoptions a.sortremove:after {
content: '\\';
position: absolute;
top: -6px;
left: 3px;
font-weight: 200;
font-size: 18px;
color: var(--body-quiet-color);
}
table thead th.sorted .sortoptions a.sortremove:focus:after,
table thead th.sorted .sortoptions a.sortremove:hover:after {
color: var(--link-fg);
}
table thead th.sorted .sortoptions a.sortremove:focus,
table thead th.sorted .sortoptions a.sortremove:hover {
background-position: 0 -14px;
}
table thead th.sorted .sortoptions a.ascending {
background-position: 0 -28px;
}
table thead th.sorted .sortoptions a.ascending:focus,
table thead th.sorted .sortoptions a.ascending:hover {
background-position: 0 -42px;
}
table thead th.sorted .sortoptions a.descending {
top: 1px;
background-position: 0 -56px;
}
table thead th.sorted .sortoptions a.descending:focus,
table thead th.sorted .sortoptions a.descending:hover {
background-position: 0 -70px;
}<body class="change-list">
<!-- Container -->
<div id="container">
<div class="main shifted" id="main">
<button class="sticky toggle-nav-sidebar" id="toggle-nav-sidebar" aria-label="Toggle navigation"></button>
<div id="content-start" class="content" tabindex="-1">
<!-- Content -->
<div id="content" class="">
<h1>Select Situation to change</h1>
<div id="content-main">
<ul class="object-tools">
</ul>
<div class="module filtered" id="changelist">
<div class="changelist-form-container">
<form id="changelist-form" method="post" novalidate=""><input type="hidden">
<div class="results">
<table id="result_list">
<thead>
<tr>
<th scope="col">
<span>
<input type="checkbox" id="action-toggle">
</span>
<div class="clear"></div>
</th>
<th scope="col">
<div class="rotate">hi</div>
<div class="clear"></div>
</th>
<th scope="col">
<span>
<div class="rotate">stat1</div>
</span>
<div class="clear"></div>
</th>
<th scope="col">
<span>
<div class="rotate">huge buttontext</div>
</span>
<div class="clear"></div>
</th>
<th scope="col">
<span>
ident
</span>
<div class="clear"></div>
</th>
<th scope="col">
<span>
timestamp
</span>
<div class="clear"></div>
</th>
<th scope="col">
<span>
name
</span>
<div class="clear"></div>
</th>
<th scope="col">
<span>
Store
</span>
<div class="clear"></div>
</th>
<th scope="col">
<span>
Adress
</span>
<div class="clear"></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="action-checkbox"><input type="checkbox" name="_selected_action" value="15" class="action-select"></td>
<th class="field-get_status"><a href="..."><span class="dot" style="height: 12px; width: 12px; border-radius: 50%; background-color: red; display: inline-block;"></span></a></th>
<td class="field-get_powerstate"><a href="..."><span class="dot" style="height: 12px; width: 12px; border-radius: 50%; background-color: red; display: inline-block;"></span></a></td>
<td class="field-get_persistence"><a href="..."><span class="dot" style="height: 12px; width: 12px; border-radius: 50%; background-color: red; display: inline-block;"></span></a></td>
<td class="field-get_serial"><a href="..."><span style="font-weight: bold;">xxxxxxxxxxxxxxxxxx</span></a></td>
<td class="field-get_onoff_timestamp">18. Feb 2020 - 10:10:48</td>
<td class="field-get_shelf_name"></td>
<td class="field-get_store">store</td>
<td class="field-get_store_address">None, None - None</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- END Container -->
</body>Solution
Causing the problem here in your div.rotate class. You set height: 80px; and max-height: 80px;, So when you rotate the text, it'll make an space or margin.
I suggest to change your tranformation from transform: rotate(-90deg); to transform: translateX(155%) translateY(40%) rotate(-90deg);. By doing so, you can set the x and y axis of the text.
@import url('https://fonts.googleapis.com/css2?family=B612:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* VARIABLE DEFINITIONS */
:root {
--primary: #727272;
--secondary: #8fb3e2;
--accent: #000000;
--primary-fg: #fff;
--body-fg: #333;
--body-bg: #fff;
--body-quiet-color: #666;
--body-loud-color: #000;
--header-color: #ffc;
--header-branding-color: var(--accent);
--header-bg: var(--secondary);
--header-link-color: var(--primary-fg);
--breadcrumbs-fg: #000000;
--breadcrumbs-link-fg: var(--body-bg);
--breadcrumbs-bg: var(--primary);
--link-fg: #292929;
--link-hover-color: #036;
--link-selected-fg: #5b80b2;
--hairline-color: #e8e8e8;
--border-color: #ccc;
--error-fg: #ba2121;
--message-success-bg: #dfd;
--message-warning-bg: #ffc;
--message-error-bg: #ffefef;
--darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
--selected-bg: #e4e4e4; /* E.g. selected table cells */
--selected-row: #ffc;
--button-fg: #fff;
--button-bg: var(--primary);
--button-hover-bg: #609ab6;
--default-button-bg: var(--secondary);
--default-button-hover-bg: #205067;
--close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
--close-button-hover-bg: #747474;
--delete-button-bg: #ba2121;
--delete-button-hover-bg: #a41515;
--object-tools-fg: var(--button-fg);
--object-tools-bg: var(--close-button-bg);
--object-tools-hover-bg: var(--close-button-hover-bg);
}
@media (prefers-color-scheme: dark) {
:root {
--primary: #264b5d;
--primary-fg: #eee;
--body-fg: #eeeeee;
--body-bg: #121212;
--body-quiet-color: #e0e0e0;
--body-loud-color: #ffffff;
--breadcrumbs-link-fg: #e0e0e0;
--breadcrumbs-bg: var(--primary);
--link-fg: #81d4fa;
--link-hover-color: #4ac1f7;
--link-selected-fg: #6f94c6;
--hairline-color: #272727;
--border-color: #353535;
--error-fg: #e35f5f;
--message-success-bg: #006b1b;
--message-warning-bg: #583305;
--message-error-bg: #570808;
--darkened-bg: #212121;
--selected-bg: #1b1b1b;
--selected-row: #00363a;
--close-button-bg: #333333;
--close-button-hover-bg: #666666;
}
}
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial,sans-serif;
color: var(--body-fg);
background: var(--body-bg);
}
/* LINKS */
a:link, a:visited {
color: var(--link-fg);
text-decoration: none;
transition: color 0.15s, background 0.15s;
}
a:focus, a:hover {
color: var(--link-hover-color);
}
a:focus {
text-decoration: underline;
}
a img {
border: none;
}
a.section:link, a.section:visited {
color: var(--header-link-color);
text-decoration: none;
}
a.section:focus, a.section:hover {
text-decoration: underline;
}
/* GLOBAL DEFAULTS */
p, ol, ul, dl {
margin: .2em 0 .8em 0;
}
p {
padding: 0;
line-height: 140%;
}
h1,h2,h3,h4,h5 {
font-weight: bold;
}
h1 {
margin: 0 0 20px;
font-weight: 300;
font-size: 20px;
color: var(--body-quiet-color);
}
h2 {
font-size: 16px;
margin: 1em 0 .5em 0;
}
h2.subhead {
font-weight: normal;
margin-top: 0;
}
h3 {
font-size: 14px;
margin: .8em 0 .3em 0;
color: var(--body-quiet-color);
font-weight: bold;
}
h4 {
font-size: 12px;
margin: 1em 0 .8em 0;
padding-bottom: 3px;
}
h5 {
font-size: 10px;
margin: 1.5em 0 .5em 0;
color: var(--body-quiet-color);
text-transform: uppercase;
letter-spacing: 1px;
}
ul > li {
list-style-type: square;
padding: 1px 0;
}
li ul {
margin-bottom: 0;
}
li, dt, dd {
font-size: 13px;
line-height: 20px;
}
dt {
font-weight: bold;
margin-top: 4px;
}
dd {
margin-left: 0;
}
form {
margin: 0;
padding: 0;
}
fieldset {
margin: 0;
min-width: 0;
padding: 0;
border: none;
border-top: 1px solid var(--hairline-color);
}
blockquote {
font-size: 11px;
color: #777;
margin-left: 2px;
padding-left: 10px;
border-left: 5px solid #ddd;
}
code, pre {
font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
color: var(--body-quiet-color);
font-size: 12px;
overflow-x: auto;
}
pre.literal-block {
margin: 10px;
background: var(--darkened-bg);
padding: 6px 8px;
}
code strong {
color: #930;
}
hr {
clear: both;
color: var(--hairline-color);
background-color: var(--hairline-color);
height: 1px;
border: none;
margin: 0;
padding: 0;
font-size: 1px;
line-height: 1px;
}
/* TEXT STYLES & MODIFIERS */
.small {
font-size: 11px;
}
.mini {
font-size: 10px;
}
.help, p.help, form p.help, div.help, form div.help, div.help li {
font-size: 11px;
color: var(--body-quiet-color);
}
div.help ul {
margin-bottom: 0;
}
.help-tooltip {
cursor: help;
}
p img, h1 img, h2 img, h3 img, h4 img, td img {
vertical-align: middle;
}
.quiet, a.quiet:link, a.quiet:visited {
color: var(--body-quiet-color);
font-weight: normal;
}
.clear {
clear: both;
}
.nowrap {
white-space: nowrap;
}
.hidden {
display: none;
}
/* TABLES */
table {
border-collapse: collapse;
border-color: var(--border-color);
}
td, th {
font-size: 13px;
line-height: 16px;
border-bottom: 1px solid var(--hairline-color);
vertical-align: top;
padding: 8px;
}
th {
font-weight: 600;
text-align: left;
}
div.rotate {
/* all: revert; */
vertical-align: bottom;
/* position: relative; */
/* transform: rotate(-90deg); */
transform: translateX(155%) translateY(40%) rotate(-90deg);
width: 20px;
max-width: 20px;
height: 80px;
max-height: 80px;
background: var(--darkened-bg);
}
thead th,
tfoot td {
color: var(--body-quiet-color);
padding: 5px 10px;
font-size: 11px;
background: var(--body-bg);
border: none;
border-top: 1px solid var(--hairline-color);
border-bottom: 1px solid var(--hairline-color);
}
tfoot td {
border-bottom: none;
border-top: 1px solid var(--hairline-color);
}
thead th.required {
color: var(--body-loud-color);
}
tr.alt {
background: var(--darkened-bg);
}
tr:nth-child(odd), .row-form-errors {
background: var(--body-bg);
}
tr:nth-child(even),
tr:nth-child(even) .errorlist,
tr:nth-child(odd) + .row-form-errors,
tr:nth-child(odd) + .row-form-errors .errorlist {
background: var(--darkened-bg);
}
/* SORTABLE TABLES */
thead th {
padding: 5px 10px;
line-height: normal;
text-transform: uppercase;
background: var(--darkened-bg);
}
thead th a:link, thead th a:visited {
color: var(--body-quiet-color);
}
thead th.sorted {
background: var(--selected-bg);
}
thead th.sorted .text {
padding-right: 42px;
}
table thead th .text span {
padding: 8px 10px;
display: block;
}
table thead th .text a {
display: block;
cursor: pointer;
padding: 8px 10px;
}
table thead th .text a:focus, table thead th .text a:hover {
background: var(--selected-bg);
}
thead th.sorted a.sortremove {
visibility: hidden;
}
table thead th.sorted:hover a.sortremove {
visibility: visible;
}
table thead th.sorted .sortoptions {
display: block;
padding: 9px 5px 0 5px;
float: right;
text-align: right;
}
table thead th.sorted .sortpriority {
font-size: .8em;
min-width: 12px;
text-align: center;
vertical-align: 3px;
margin-left: 2px;
margin-right: 2px;
}
table thead th.sorted .sortoptions a {
position: relative;
width: 14px;
height: 14px;
display: inline-block;
background: url(../img/sorting-icons.svg) 0 0 no-repeat;
background-size: 14px auto;
}
table thead th.sorted .sortoptions a.sortremove {
background-position: 0 0;
}
table thead th.sorted .sortoptions a.sortremove:after {
content: '\\';
position: absolute;
top: -6px;
left: 3px;
font-weight: 200;
font-size: 18px;
color: var(--body-quiet-color);
}
table thead th.sorted .sortoptions a.sortremove:focus:after,
table thead th.sorted .sortoptions a.sortremove:hover:after {
color: var(--link-fg);
}
table thead th.sorted .sortoptions a.sortremove:focus,
table thead th.sorted .sortoptions a.sortremove:hover {
background-position: 0 -14px;
}
table thead th.sorted .sortoptions a.ascending {
background-position: 0 -28px;
}
table thead th.sorted .sortoptions a.ascending:focus,
table thead th.sorted .sortoptions a.ascending:hover {
background-position: 0 -42px;
}
table thead th.sorted .sortoptions a.descending {
top: 1px;
background-position: 0 -56px;
}
table thead th.sorted .sortoptions a.descending:focus,
table thead th.sorted .sortoptions a.descending:hover {
background-position: 0 -70px;
}<body class="change-list">
<!-- Container -->
<div id="container">
<div class="main shifted" id="main">
<button class="sticky toggle-nav-sidebar" id="toggle-nav-sidebar" aria-label="Toggle navigation"></button>
<div id="content-start" class="content" tabindex="-1">
<!-- Content -->
<div id="content" class="">
<h1>Select Situation to change</h1>
<div id="content-main">
<ul class="object-tools">
</ul>
<div class="module filtered" id="changelist">
<div class="changelist-form-container">
<form id="changelist-form" method="post" novalidate=""><input type="hidden">
<div class="results">
<table id="result_list">
<thead>
<tr>
<th scope="col">
<span>
<input type="checkbox" id="action-toggle">
</span>
<div class="clear"></div>
</th>
<th scope="col">
<div class="rotate">hi</div>
<div class="clear"></div>
</th>
<th scope="col">
<span>
<div class="rotate">stat1</div>
</span>
<div class="clear"></div>
</th>
<th scope="col">
<span>
<div class="rotate">huge buttontext</div>
</span>
<div class="clear"></div>
</th>
<th scope="col">
<span>
ident
</span>
<div class="clear"></div>
</th>
<th scope="col">
<span>
timestamp
</span>
<div class="clear"></div>
</th>
<th scope="col">
<span>
name
</span>
<div class="clear"></div>
</th>
<th scope="col">
<span>
Store
</span>
<div class="clear"></div>
</th>
<th scope="col">
<span>
Adress
</span>
<div class="clear"></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="action-checkbox"><input type="checkbox" name="_selected_action" value="15" class="action-select"></td>
<th class="field-get_status"><a href="..."><span class="dot" style="height: 12px; width: 12px; border-radius: 50%; background-color: red; display: inline-block;"></span></a></th>
<td class="field-get_powerstate"><a href="..."><span class="dot" style="height: 12px; width: 12px; border-radius: 50%; background-color: red; display: inline-block;"></span></a></td>
<td class="field-get_persistence"><a href="..."><span class="dot" style="height: 12px; width: 12px; border-radius: 50%; background-color: red; display: inline-block;"></span></a></td>
<td class="field-get_serial"><a href="..."><span style="font-weight: bold;">xxxxxxxxxxxxxxxxxx</span></a></td>
<td class="field-get_onoff_timestamp">18. Feb 2020 - 10:10:48</td>
<td class="field-get_shelf_name"></td>
<td class="field-get_store">store</td>
<td class="field-get_store_address">None, None - None</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- END Container -->
</body>- I am a beginner and I just started to learn java servlets and jsp. Can someone help me find the error in this code?
- How to prevent text moving when transitioning sibling element's width
- Printing a HTML template as PDF - Angular 2
- MJML : Outlook 1px horizontal when using direction rtl on mj-section
- HTML dialog focusing button element when opened
- Dynamic html and js
- Input regex for UK postcodes constantly invalid
- Put a star notation in a HTML page
- Can I have an onclick effect in CSS?
- Tailwind CSS height screen in mobile browser
- How do I tell if an HTML element has gone off the bottom of a page?
- Why select is not a input type in HTML?
- Margin different in Windows (Chome, Edge, etc.) and Mac OS (Safari)
- Print only html table using javascript
- How do I use the reverse border radius at the top of a card? (CSS)
- Allow only numbers into a input text box
- Stacked Bootstrap progress to show multiple ranges with tooltip
- Anchor link only works by "Open link in new tab" command
- How to block +,-,e in input type Number?
- Printing a webpages raw html data unformatted with tags and similar information
- Creating an end screen for my game using javascript, css, and html
- How do I include a HTML file in a Jinja2 template?
- CSS table layout: why does table-row not accept a margin?
- Add fontawesome to shadowroot of webcomponent
- Darkening an image when clicked is requiring an initial click on that image, and I don't know why
- Adding margins between Bootstrap columns
- css border: 1px appear as 0.667px or 1px depending on the computer / display resolution (?)
- Button to download file and redirect to new page
- How to insert row with attributes using table.insertRow?
- Pass objects/vars between Page_PreInit and Page_Load