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>
Related
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'm trying to style a table using only SASS/CSS. I've set the width of my table to be 100%. However, when I set the font-size of the th element to 0.8em, My table fails to take all of the width it's allowed (Notice that the columns do not reach the border line on the right). How can I fix this using CSS, given that I don't control the HTML?
SASS/CSS
table {
color: black;
background-color: white;
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
border-radius: 5px;
border-collapse: collapse;
border-spacing: 0;
display: block;
overflow: auto;
width: 100%;
thead {
th {
color: white;
background-color: black;
font-weight: bold;
font-size: 0.8em;
padding: 5px 10px;
vertical-align: bottom;
}
th:first-child {
border-top-left-radius: 5px;
}
th:last-child {
border-top-right-radius: 5px;
}
}
tbody {
td {
border-top: 1px solid gray;
padding: 5px 10px;
vertical-align: top;
}
tr:nth-child(2n) {
background-color: lightgray;
}
}
}
<table>
<thead>
<tr>
<th>Method</th>
<th>Runtime</th>
<th align="right">Mean</th>
<th align="right">Ratio</th>
<th align="right">Gen 0/1k Op</th>
<th align="right">Allocated Memory/Op</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baseline</td>
<td>Clr</td>
<td align="right">1.833 us</td>
<td align="right">1.00</td>
<td align="right">2.0542</td>
<td align="right">6.31 KB</td>
</tr>
</tbody>
</table>
Here is what I think you want, I just removed border-collapse, display:block (this make the table default CSS), here is a codepen with SCSS and a working snippet is here too:
table {
color: black;
background-color: white;
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
border-radius: 5px;
border-collapse: separte;
border-spacing: 0;
display: table;
overflow: auto;
width: 100%;
}
table thead th {
color: white;
background-color: black;
font-weight: bold;
font-size: 0.8em;
padding: 5px 10px;
vertical-align: bottom;
}
table thead th:first-child {
border-top-left-radius: 5px;
}
table thead th:last-child {
border-top-right-radius: 5px;
}
table tbody td {
border-top: 1px solid gray;
padding: 5px 10px;
vertical-align: top;
}
table tbody tr:nth-child(2n) {
background-color: lightgray;
}
<table>
<thead>
<tr>
<th>Method</th>
<th>Runtime</th>
<th align="right">Mean</th>
<th align="right">Ratio</th>
<th align="right">Gen 0/1k Op</th>
<th align="right">Allocated Memory/Op</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baseline</td>
<td>Clr</td>
<td align="right">1.833 us</td>
<td align="right">1.00</td>
<td align="right">2.0542</td>
<td align="right">6.31 KB</td>
</tr>
</tbody>
</table>
remove display:block from table
#container,tr{
width:100%;
}
html,body{
width:100%;
}
#container{
border-radius:15px;
background-color:black;
}
table {
color: black;
background-color: white;
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
border-radius: 5px;
border-collapse: collapse;
border-spacing: 0;
overflow: auto;
width: 98%;
margin:0 auto;
}
th {
color: white;
background-color: black;
font-weight: bold;
font-size: 0.8em;
padding: 5px 10px;
vertical-align: bottom;
}
th:first-child {
border-top-left-radius: 5px;
}
th:last-child {
border-top-right-radius: 5px;
}
td {
border-top: 1px solid gray;
padding: 5px 10px;
vertical-align: top;
}
tr:nth-child(2n) {
background-color: lightgray;
}
<html>
<body>
<div id='container'>
<table>
<thead>
<tr>
<th>Method</th>
<th>Runtime</th>
<th align="right">Mean</th>
<th align="right">Ratio</th>
<th align="right">Gen 0/1k Op</th>
<th align="right">Allocated Memory/Op</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baseline</td>
<td>Clr</td>
<td align="right">1.833 us</td>
<td align="right">1.00</td>
<td align="right">2.0542</td>
<td align="right">6.31 KB</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
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>
I have a table with this CSS
.tabelaTripla {
border: 0px;
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 20px;
font-size: 0.7em;
line-height: 1.3em;
}
.tabelaTripla tr {
padding: 40px;
margin: 40px;
}
.tabelaTripla th, td{
border: 0px;
width: 33%;
}
.tabelaTripla td{
border: 0px;
width: 33%;
text-align: center;
vertical-align:middle;
word-wrap: break-word;
padding: 40px;
border: 1px solid #AAAAAA;
border-radius: 20px;
}
this works correctly on all browsers but I see this on Firefox for Mac.
Firefox is not rounding the coloring of the columns.
My HTML code for this is simple:
<table class="tabelaTripla">
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
</table>
just a table with 3 columns
Still quite not sure where you went wrong, because you haven't provided the CSS for the colours, but you can just set .tabelaTripla to background-color: yellow; and then set the .tabelaTripla td to background-color: white;. (Obviously you can change these colours to whatever you want)
.tabelaTripla {
border: 0px;
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 20px;
font-size: 0.7em;
line-height: 1.3em;
background-color: yellow;
}
.tabelaTripla tr {
padding: 40px;
margin: 40px;
}
.tabelaTripla th, td {
border: 0px;
width: 33%;
}
.tabelaTripla td {
border: 0px;
width: 33%;
text-align: center;
vertical-align: middle;
word-wrap: break-word;
padding: 40px;
border: 1px solid #AAAAAA;
border-radius: 20px;
background-color: white;
}
<table class="tabelaTripla">
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
</table>
The above snippet will produce this effect:
Edit: By the way, I am also using FireFox on Mac OSX so this should work for you as well.
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;
}