I have problem with wordpress theme , when I open my website in mobile the theme is exactly desktop view but when I change the view to mobile view in inspect element it's work true .
https://www.pdfcar.com
I'm not sure if I understood your question, but try to add the following line to the <head>-tag of your HTML-file:
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name="viewport">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
style>.responsiveImg1 {
width: 50%;
max-width: 800px;
height: auto;
}
.clsdivmain {
background-color: #660066; /* Green */
}
.center {
margin: auto;
width: 60%;
padding: 10px;
text-align: center;
}
.table {
border: 1px solid black;
width: 70%;
margin: auto;
}
.table1 {
padding: 10px;
width: 70%;
margin: auto;
}
.table2 {
width: 70%;
margin: auto;
background-size: 70%;
}
.tableheader {
width: 70%;
height: 70%;
margin: auto;
background-size: 70%;
}
.tablerowwidth {
width: 50%;
}
.tablerowwidth3 {
width: 10%;
}
.buttonPay {
background-color: #660066; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
width: 40%;
}
.buttonCancel {
background-color: #0071A5; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
width: 40%;
}
.buttonPay1 {
width: 80%;
padding: 5px;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
rgba(0, 0, 0, 0.19);
}
.buttonCancel1 {
width: 80%;
padding: 5px;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
rgba(0, 0, 0, 0.19);
}
.headingtext1 {
color: #063871;
font-style: bold;
font: 22px arial, verdana;
padding: 5px;
float: left;
width: 50%;
height: 50%;
}
.infoText {
color: #063871;
font-style: normal;
font: 15px arial, verdana;
align: center;
float: left;
width: 100%;
background-size: 100%;
}
.disclaimerText {
color: #063871;
font-style: normal;
font: 15px arial, verdana;
align: top;
float: left;
width: 100%;
background-size: 100%;
}
.labels {
color: #063871;
font-style: normal;
font: 15px arial, verdana;
font-weight: bold;
align: center;
padding: 10px;
float: left;
width: 100%;
margin: auto;
background-size: 70%;
}
.generaltext {
color: #063871;
font-style: normal;
font: 15px arial, verdana;
padding: 5px;
align: center;
float: left;
width: 100%;
background-size: 70%;
margin: auto;
}
.variables {
color: #063871;
background-color: #c9c9c9;
font-size: 15px;
font-style: normal;
font: 15px arial, verdana;
align: center;
padding: 20px;
float: left;
width: 100%;
background-size: 70%;
margin: auto;
}
.main {
background-color: #f1f1f1;
padding: 20px;
float: left;
width: 60%; /* The width is 60%, by default */
}
.right {
background-color: #4CAF50;
padding: 20px;
float: left;
width: 20%; /* The width is 20%, by default */
}
/* Use a media query to add a break point at 800px: */
#media screen and (max-width:800px) {
.table {
padding: 10px;
width: 100%;
margin: auto;
}
.tablerowwidth3 {
width: 1%;
}
.tableheader {
width: 100%;
}
.buttonPay1 {
width: 100%;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
rgba(0, 0, 0, 0.19);
}
.buttonCancel1 {
width: 100%;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
rgba(0, 0, 0, 0.19);
}
.tablerowwidth {
width: 100%;
}
.headingtext1 {
width: 100%;
height: 50%;
}
.responsiveImg1 {
width: 100%;
}
.table2 {
width: 100%;
margin: auto;
}
.tableheader {
width: 100%;
height: 70%;
margin: auto;
}
.table1 {
padding: 10px;
width: 100%;
margin: auto;
}
}
</style>
</head>
<body>
<table class="tableheader">
<tr>
<td align="right"><img src="logo.png" clas="responsiveImg1">
</td>
</tr>
</table>
<table class="tableheader">
<tr>
<td class="tablerowwidth" height="10"><label
class="headingtext1">Heading 1</label></td>
</tr>
</table>
<div class="infoText">
<table class="table1">
<tr>
<td>Mr, </br>
</br>Message one</br>Message two</td>
</tr>
</table>
</div>
<div class="labels">
<p class="table2">Subheading one</p>
<table class="table">
<tr>
<td width="30%">Field one</td>
<td width="45%" class="generaltext">AAAAAAAA</td>
<td width="20%" class="tablerowwidth3"></td>
<td width="20%" class="tablerowwidth3"></td>
</tr>
<tr>
<td width="20%">Field one</td>
<td width="45%" class="generaltext">BBBBBBBB</td>
<td width="10%" class="tablerowwidth3"></td>
<td width="10%" class="tablerowwidth3"></td>
</tr>
<tr>
<td width="20%">Field one</td>
<td width="65%" class="generaltext">CCCCCCCCC</td>
<td width="10%" class="tablerowwidth3"></td>
<td width="10%" class="tablerowwidth3"></td>
</tr>
<tr>
<td width="20%">Field one</td>
<td width="65%" class="generaltext">DDDDDDDD</td>
<td width="10%" class="tablerowwidth3"></td>
<td width="10%" class="tablerowwidth3"></td>
</tr>
<tr>
<td width="20%"></td>
<td width="65%" class="generaltext">EEEEEEEE</td>
<td width="10%" class="tablerowwidth3"></td>
<td width="10%" class="tablerowwidth3"></td>
</tr>
<tr>
<td width="20%">Field one</td>
<td width="65%" class="generaltext">FFFFFFFF</td>
<td width="10%" class="tablerowwidth3"></td>
<td width="10%" class="tablerowwidth3"></td>
</tr>
<tr>
<td width="20%">Field one</td>
<td width="65%" class="generaltext">GGGGGGGG</td>
<td width="10%" class="tablerowwidth3"></td>
<td width="10%" class="tablerowwidth3"></td>
</tr>
<tr>
<td colspan="2"><input type="submit"
class="buttonPay buttonPay1" name="PayNow" value="Submit"></td>
</tr>
<tr>
<td colspan="2"><input type="submit"
class="buttonCancel buttonCancel1" name="PayCancel"
value="Reset"></td>
</tr>
</table>
<div class="disclaimerText">
<table class="table1">
<tr>
<td align="top">---Disclaimer </br>Field. </br>Field.</br>Field.</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Related
I am trying to create a simple concession stand menu that will display snack items on the left side of the image and drinks on the right side of the image.
However, I need the items on the menu and the background image to resize depending on the size of the screen while also allowing the items on the menu to stay in the same location on the image.
The code below is working, but with this code, I am having to create a new class for each new row of the menu. I know this is not the best way of creating this type of page.
My current css is from the idea on this post: Positioning text over an image so that it always points to the same spot in the image even when resizing the browser
Any help is appreciated.
<div class="parent">
<table>
<tr>
<td class="box window">Snacks </td>
<td class="box item1">Sausage Dog</td>
<div class="box item1 price">3</div>
<td class="box item2">Sausage Dog</td>
<div class="box item2 price">3</div>
<img class="img" src="menubackground.jpg" alt=""/>
</tr>
</table>
</div>
<style>
.container {
border: 1px solid red;
width: 300px;
height: 90px;
}
* {
box-sizing: border-box;
margin: 0;
}
img {
max-width: 100%;
display: block;
width: 100%;
height: 100%;
background-size: auto;
}
.parent {
position: relative;
}
.parent .box {
position: absolute;
width: calc(1.2vw + 15px); height: calc(1.2vw + 10px);
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
.parent .box.window {
top: 15%;
left: 8%;
color: #ffc11c;
font-size: 3vw;
padding: 40px;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.parent .box.item1 {
top: 27%;
left: 6.6%;
color: white;
font-family: 'Bahnschrift';
min-width: 12%;
max-width: 9px;
font-size: 2vw;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.parent .box.item2 {
top: 32%;
left: 6.6%;
color: white;
font-family: 'Bahnschrift';
min-width: 12%;
max-width: 9px;
font-size: 2vw;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.parent .box.item1.price {
top: 27%;
left: 20%;
color: white;
font-family: 'Bahnschrift';
font-size: 2vw;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.parent .box.item2.price {
top: 32%;
left: 20%;
color: white;
font-family: 'Bahnschrift';
font-size: 2vw;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.parent .box.light {
top: 16%;
left: 48%;
color: #ffc11c;
}
.parent .box.pool {
top: 90%;
left: 50%;
color: #ffc11c;
}
.parent .box.plant {
top: 55%;
left: 3%;
color: #ffc11c;
}
</style>
I suppose you're trying to achieve something like this:
* {
box-sizing: border-box;
margin: 0;
}
.parent {
display:flex;
width: 100%;
height: auto;
justify-content: space-between;
background-image: url("https://s7g10.scene7.com/is/image/tetrapak/pouring-milk?wid=600&hei=338&fmt=jpg&resMode=sharp2&qlt=85,0&op_usm=1.75,0.3,2,0");
background-size: cover;
background-position: cneter;
}
.parent table{
padding: 35px 10px;
}
.box {
text-align: center;
}
<div class='parent'>
<table class='snack'>
<tr>
<th class="box window">Snacks</th>
<th class="box window">Price</th>
</tr>
<tr>
<td class="box item1">Sausage Dog</td>
<td class="box item1 price">3</td>
</tr>
<tr>
<td class="box item2">Sausage Dog</td>
<td class="box item2 price">3</td>
</tr>
</table>
<table class='water'>
<tr>
<th class="box window">Drinks</th>
<th class="box window">Price</th>
</tr>
<tr>
<td class="box item1">Sausa</td>
<td class="box item1 price">3</td>
</tr>
<tr>
<td class="box item2">Sausa</td>
<td class="box item2 price">3</td>
</tr>
</table>
</div>
On my html , I'm trying to give rowspan=2 to my td. The issue is that the td don't go down and take the row. May be I miss something?
I tried to add more tr and td but it's still not good. Maybe I need to add something?
UPDATE
added my css.
module.exports = (data) => {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
width: 90%;
padding: 0 10px;
margin: 0px;
min-height: 1350px;
background-color: #fff;
}
.pageWrapper {
position: relative;
width: 100%;
direction: rtl;
padding: 0 15px;
}
.header {
position: relative;
width: 100%;
}
.header img {
display: block;
width: 350px;
/* height: 120px; */
margin: 0 auto;
padding: 0;
border:0 none !important;
background-color: transparent !important;
}
.header h1,
.header h2 {
text-align: center;
display: block;
}
.header h1 {
font-size: 1.5rem;
}
.header h2 {
font-size: 1rem;
}
h3 {
background-color: #D3D3D3;
}
table {
width: 100%;
display: block;
// border-collapse: collapse;
margin: 0 auto;
background-color: #fff;
margin: 0;
}
table.newPage {
margin-top: 10px;
}
tbody,
tr,
th,
thead {
width: 100%;
display: block;
}
tr {
display: block;
}
tbody {
border: 1px solid #2c2b7d;
}
thead {
background-color: #2c2b7d;
color: #fff;
}
th {
padding: 4px;
}
tbody th {
text-align: right;
padding: 2px;
border-top: 1px solid #2c2b7d;
color: #2c2b7d;
text-decoration: underline;
font-size: 0.9rem;
}
td {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
min-height: 33px;
border-left: 1px solid #2c2b7d;
border-bottom: 1px solid #2c2b7d;
}
td:not(:first-child) {
margin-right: -5px;
}
td:last-child {
border-left: none;
}
td.col-1 {
width: 8.33333333%;
}
td.col-1-nobroder {
width: 8.33333333%;
border-bottom : none;
}
td.col-2 {
width: 19.9%;
}
td.col-2-email-firstTb {
width: 39.75%;
}
td.col-2-email {
width: 31%;
padding-bottom: 3px;
}
td.col-2-email-noborder {
width: 31%;
padding-bottom: 3px;
border-bottom : none;
}
td.col-2-CoverNameAgent {
width: 34.90%;
}
td.col-2-rhisoynumber {
width: 14.5%;
}
td.col-2-rhisoynumber-noborder {
width: 14.5%;
border-bottom : none;
}
td.col-2-carkind {
width: 10.35%;
}
td.col-2-shildanumber {
width: 15%;
}
td.col-3-second-section {
width: 19.5%;
}
td.col-3 {
width: 25%;
}
td.col-4 {
width: 33.3333333333333%;
}
td.col-5 {
width: 41.6666666666667%;
}
td.col-6 {
width: 50%;
}
td.col-7 {
width: 58.3333333333333%;
}
td.col-8 {
width: 66.6666666666667%;
}
td.col-9 {
width: 75%;
}
td.col-10 {
width: 83.3333333333333%;
}
td.col-11 {
width: 91.6666666666667%;
}
td.col-12 {
width: 100%;
}
td span {
display: block;
width: 100%;
font-size: 0.7rem;
color: #2c2b7d;
font-weight: bold;
text-align: right;
padding-right: 3px;
white-space: nowrap
}
td p {
display: block;
/* position: absolute; */
/* top: 2px; */
/* right: 5px; */
font-size: 0.7rem;
text-align: center;
width: 100%;
color: #000;
white-space: nowrap;
/* background-color: #D3D3D3; */
}
td img {
display: block;
width: 100%;
position: absolute;
top: 0;
max-height: 29px;
}
td p.trems {
position: relative;
text-align: right;
width: 95%;
margin-bottom: 5px;
direction: rtl;
font-size: 0.6rem;
}
label {
font-size: 0.7rem;
position: relative;
top: -2px;
}
.checkbox {
width: 12px;
height: 12px;
position: reletive;
padding-right: 1px;
padding-bottom: 2px;
top: 30px;
right: 20px;
border-radius: 3px;
display: inline-block;
border: 1px solid #2c2b7d;
color: #2c2b7d;
font-size: 12px;
}
.first-section-border {
border: 2px solid black;
}
.section-border-small {
border: 2px solid black;
width: 20%;
height: 100%;
border-spacing: 0 margin-bottom: 20px;
}
.section-border {
border: 2px solid black;
width: 78%;
border-spacing: 0
}
.second-section-border {
border: 2px solid black;
width: 100%;
}
.small-font {
font-size: 9px;
text-align: center;
margin-bottom: 6px
}
.small-font-secTwo{
font-size: 9px;
text-align: center;
margin-bottom: 6px;
border-bottom : none;
}
.small-font-span {
font-size: 8px;
text-align: center;
}
.small-td {
width: 14%;
border-bottom : none;
}
.col-1-name-and-firma {
width: 12%;
}
.name-and-firma {
padding: 0;
// margin-bottom: 1px;
font-size: 11px;
}
.your-fault {
font-size: 10px;
max-width: 5px;
margin-bottom: 4px;
text-align : center;
}
.your-fault-width {
font-size: 10px;
max-width: 5px;
margin-bottom: 4px width: 12%;
}
.your-fault-bitohLemui {
font-size: 10px;
max-width: 5px;
margin-bottom: 4px word-wrap:break-word;
}
input[type='checkbox'] {
/* Double-sized Checkboxes */
-webkit-transform: scale(1);
/* Safari and Chrome */
transform: scale(1);
margin-top: 1px;
margin-right: 5px;
}
.margin-top {
margin-top: 1px;
}
.col-1-ishurEhagastTviaa {
width: 50%;
border-bottom: none;
}
.col-2-thiurKlali {
height: 50px;
}
.signAndDate {
width: 20%;
text-align: right;
border: none;
}
.signAndDateFont {
font-size: 15px;
}
.width20point4 {
width: 20.4%;
}
</style>
</head>
<body>
<div class="pageWrapper">
<!-- Part 4 -->
<table class="first-section-border">
<table>
<tbody>
<tr>
<td style="width: 20%; ">1,1</td>
<td style="width: 20%;">1,2</td>
<td style="width: 20%; ">1,3</td>
<td rowspan=2 style="width: 20%;">1-2,4</td>
<td rowspan=2 style="width: 20%;">1-2,4</td>
</tr>
<tr >
<td style="width: 20%; ">2,1</td>
<td style="width: 20%; ">2,2</td>
<td style="width: 20%; ">2,3</td>
</tr>
</tbody>
</table>
<img src="file:///C:/Users/User/Desktop/htmlIWithPdf/assets/bth.jpg" >
</div>
</body>
</html>
`
}
1st: You need use <tr> tag for conclude the first block of <td> tags (a columns must be inside a row).
2nd: The amount of columns in each row in the table must be equal (argument rowspan="2" of <td> (e.g. <td rowspan="2">...</td>) tag means "minus one column in the next row under this cell").
--- UPDATE 1 ---
Generally, <table>...</table> has syntax (in common view):
<table>
<thead> <!-- Header section -->
<tr>
<th>Column 1 title</th>
<th>Column 2 title</th>
...
<th>Column N title</th>
</tr>
</thead>
<tbody> <!-- Body of table -->
<tr>
<td>Cell (row 1 col 1)</td>
<td>Cell (row 1 col 2)</td>
...
<td>Cell (row 1 col N)</td>
</tr>
...
<tr>
<td>Cell (row M col 1)</td>
<td>Cell (row M col 2)</td>
...
<td>Cell (row M col N)</td>
</tr>
</tbody>
<tfoot> <!-- Table footer -->
<tr>
<td>Col.1 footer</td>
<td>Col.2 footer</td>
...
<td>Col.N footer</td>
</tr>
</tfoot>
</table>
Of course you can exclude any section with all its elements.
--- END OF UPD.1 ---
Use this for example:
<!DOCTYPTE html>
<html>
<head>
<style>
table {
border: 1px solid #000;
}
td {
border: 1px dotted #00F;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td style="width: 13%; ">1,1</td>
<td style="width: 14.5%;">1,2</td>
<td style="width: 13%; ">1,3</td>
<td rowspan=2 style="width: 29%;">1-2,4</td>
<td rowspan=2 style="width: 30.5%; ">1-2,5</td>
</tr>
<tr>
<td style="width: 40.5%; margin-right : 0.3px;">2,1</td>
<td style="width: 40.5%; margin-right : 0.3px;">2,2</td>
<td style="width: 40.5%; margin-right : 0.3px;">2,3</td>
</tr>
</tbody>
</table>
</body>
</html>
--- UPDATE 2 ---
After you update your code, I think the issue is caused by styles inside the <style>...</style> (without them all is right). Are you sure you need to reverse the order of columns by CSS? Maybe more easy way is to put to the columns values in reverse order to the table instead of using a lot of amout of styles?
Try to remove unwanted styles or rewrite them.
P.S.: I hope I correctly understood the essence of your question and was able to provide the necessary advice.
--- END OF UPD.2 ---
I was trying out this demo to help optimize some tables on a site I'm developing.
Demo works great on my desktop when I resize with a responsive tester extension for chrome:
When loading on my phone it displays everything inline and if more data is added it just spills out:
Anyone have any idea?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
</style>
</head>
<body>
<table>
<caption>Statement Summary</caption>
<thead>
<tr>
<th scope="col">Account</th>
<th scope="col">Due Date</th>
<th scope="col">Amount</th>
<th scope="col">Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Due Date">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Visa - 6076</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$2,443</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Corporate AMEX</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$1,181</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
<tr>
<td scope="row" data-label="Acount">Visa - 3412</td>
<td data-label="Due Date">02/01/2016</td>
<td data-label="Amount">$842</td>
<td data-label="Period">01/01/2016 - 01/31/2016</td>
</tr>
</tbody>
</table>
</body>
Could you please check how https://codepen.io/panchroma/pen/YzGEJPd looks for you?
The only changes I made were adding the doctype and upping the #media breakpoint to 950px
Good luck!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 950px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
</style>
</head>
I'm trying to make a small table which can scroll when there are many tr tags under the headers. I have managed to get it to work correctly with just one column but I am struggling to get it to work with more than one column as the columns do not align. It is important that the size of the table stay what it is since I am adding new rows using jQuery and auto scrolling.
I just want the columns of the thead and tbody to align...
Here is what I have so far:
.grid_background_comm {
background-color: rgb(173, 173, 173);
padding: 0px;
margin-left: 10px;
margin-right: 10px;
width: 950px;
height: 90px;
}
.grid_background_comm thead {
display: block;
text-align: left;
width: 950px;
}
.grid_background_comm th {
padding-left: 4px;
width: 950px;
}
.grid_comm {
display: block;
overflow-y: auto;
overflow-x: hidden;
text-align: left;
width: 950px;
height: 85px;
}
.grid_comm tr {
background-color: rgb(231, 231, 231);
display: block;
width: 935px;
margin-left: 3px;
margin-right: 10px;
padding-left: 4px;
padding-right: 4px;
}
.grid_header {
background-color: rgb(255, 255, 255);
border: 1px solid rgb(44, 44, 44);
padding: 0px;
margin: 0px;
width: 960px;
height: 20px;
}
<table id="table_comm" class="grid_background_comm">
<thead>
<th id="1" class='grid_header'>Line</th>
<th id="2" class='grid_header'>I/O</th>
</thead>
<tbody id="gv_comm_data" class="grid_comm">
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
</tbody>
</table>
The display:block is attached to thead and tr which is affecting their default behaviour. You could remove them
https://codepen.io/rohinikumar4073/pen/zYGKqZL
.grid_background_comm {
background-color: rgb(173, 173, 173);
padding: 0px;
margin-left: 10px;
margin-right: 10px;
width: 950px;
height: 90px;
}
.grid_background_comm thead {
text-align: left;
width: 950px;
}
.grid_background_comm th {
padding-left: 4px;
width: 950px;
}
.grid_comm {
overflow-y: auto;
overflow-x: hidden;
text-align: left;
width: 950px;
height: 85px;
}
.grid_comm tr {
background-color: rgb(231, 231, 231);
width: 935px;
margin-left: 3px;
margin-right: 10px;
padding-left: 4px;
padding-right: 4px;
}
.grid_header {
background-color: rgb(255, 255, 255);
border: 1px solid rgb(44, 44, 44);
padding: 0px;
margin: 0px;
width: 960px;
height: 20px;
}
<table id="table_comm" class="grid_background_comm">
<thead>
<tr>
<th id="1" class='grid_header'>Line</th>
<th id="2" class='grid_header'>I/O</th>
</tr>
</thead>
<tbody id="gv_comm_data" class="grid_comm">
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
</tbody>
</table>
I have an image icon inside my input, that's working fine.
The problem is that the icon is pushing my other input down. As you can see, after fade out, the input come back to desired position.
Is this a CSS issue? How can I solve this?
$("img#input_img").fadeOut(3000);
.input-test {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
input {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
#input_img {
width: 24px;
height: 24px;
position: relative;
/* adjust as you need */
left: 190px;
bottom: 27px;
}
table {
border: 1px solid red;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h2>table 1</h2>
<table>
<tr>
<td id="input_container">
<input type="text" class="input-test">
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
<h2>table 2</h2>
<table>
<tr>
<td>
<input type="text" class="input-test">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
Follow-up to my comment about just setting the background of the input...
.input-test {
background-image: url('https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png');
background-repeat: no-repeat;
background-position: 99% 48%;
background-size: 24px 24px;
}
basically, you can set the image position as absolute so that the wrapper will ignore the image height. Additionally, you have to set the wrapper position as relative so that the image position (bottom, and left) will depend on it's wrapper.
Last thing, just adjust the image position as you see fit.
I hope that makes sense for you
EDIT: to make it more clear, I only changed this much.
#input_img {
position: absolute;
/* adjust as you need */
left: 190px;
bottom: 4px;
}
table td {
position: relative;
}
$("img#input_img").fadeOut(3000);
.input-test {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
input {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
#input_img {
width: 24px;
height: 24px;
position: absolute;
/* adjust as you need */
left: 190px;
bottom: 4px;
}
table {
border: 1px solid red;
}
table td {
position: relative;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h2>table 1</h2>
<table>
<tr>
<td id="input_container">
<input type="text" class="input-test">
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
<h2>table 2</h2>
<table>
<tr>
<td>
<input type="text" class="input-test">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
In table-cell the default vertical alignment is middle, you can reset that by adding:
td {
vertical-align: top;
}
It would be better to set position: absolute; on the image, so it will be out of the normal content flow, and won't affect your standard layout, also easier to control the offsets.
td {
vertical-align: top;
position: relative;
}
#input_img {
width: 24px;
height: 24px;
position: absolute;
right: 24px;
top: 2px;
}
$("img#input_img").fadeOut(3000);
.input-test {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
input {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
#input_img {
width: 24px;
height: 24px;
position: absolute;
right: 24px;
top: 2px;
}
table {
border: 1px solid red;
}
td {
vertical-align: top;
position: relative;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h2>table 1</h2>
<table>
<tr>
<td id="input_container">
<input type="text" class="input-test">
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
<h2>table 2</h2>
<table>
<tr>
<td>
<input type="text" class="input-test">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
change this in your css should be work:
#input_img {
width: 24px;
height: 24px;
position: absolute;
right: 24px;
top: 2px;
}
td {
vertical-align: top;
position: relative;
}