I have tried different styles but I could not reach a solution,
I need to make it like:
However my code produce the output like follows:
I would like to give some space( same color with background) however either table goes up or does not work at all. I would be happy if someone can help .
here is my code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="extension.css" />
<div class="container">
<div class="jumbotron">
<div class="white"> <table>
<tr>
<td class='magenta'></td>
<td class='magenta'></td>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<tr>
<td class="white"></td>
<td class="white"></td>
</table>
</div>
<div class="white"> <table>
<tr>
<td class='magenta'></td>
<td class='magenta'></td>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<tr>
<td class="white"></td>
<td class=""></td>
</table> </div> <br><br><br>
<div class="white">
<table>
<tr>
<td class=''></td>
<td class='magenta'></td>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<tr>
<td class="white"></td>
<td class="red"></td>
</table>
</div>
<div class="white">
<table>
<tr>
<td class='magenta'></td>
<td class="green"></td>
<tr>
<td class=""></td>
<td class="blue"></td>
<tr>
<td class="red"></td>
<td class="red"></td>
</table>
</div>
</div>
</div>
and CSS. almost none of the display ttypes did work or I am doing a fundamental mistake here
.jumbotron {
background: black;
display:flex;
height: 75vh;
justify-content: center;
align-items: center;
}
table {
width: 30px;
height: 30px;
}
td {
border:1px solid black;
}
jsfiddle: https://jsfiddle.net/m6ucyryb/
According to your requirement, You should use two table. The following code will create a table in HTML. So you have to use 2 times in a code.
<table>
</table>
The requirement contains 3 table row for each table, the following code will create a row in page, so the following code is added three times for each table:
<tr>
</tr>
And each row contains 4 table data. The following code will create one table data, so under each table row, the following code is used four times.
<td class='magenta'></td>
I think you you need some spacing between them, it can be added like giving a margin to an div element:
<div class = "margin"></div>
The final solution will be as follows:
table {
width: 30px;
height: 30px;
}
.margin {
margin-top:5px;
}
td {
border:1px solid black;
}
.red{
background-color:red;
}
.yellow{
background-color:yellow;
}
.green{
background-color:green;
}
.blue{
background-color:blue;
}
.white{
background-color:white;
}
.magenta{
background-color:magenta;
}
.cyan{
background-color:cyan;
}
.black{
background-color : Black;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="extension.css" />
</head>
<body>
<table>
<tr>
<td class='magenta'></td>
<td class='magenta'></td>
<td class='magenta'></td>
<td class='magenta'></td>
</tr>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<td class="yellow"></td>
<td class="blue"></td>
</tr>
<tr>
<td class="white"></td>
<td class="white"></td>
<td class="white"></td>
<td class="white"></td>
</tr>
</table>
<div class = "margin"></div>
<table>
<tr>
<td class="white"></td>
<td class='magenta'></td>
<td class='magenta'></td>
<td class="green"></td>
</tr>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<td class="white"></td>
<td class="blue"></td>
</tr>
<tr>
<td class="white"></td>
<td class="red"></td>
<td class="red"></td>
<td class="red"></td>
</tr>
</table>
</body>
</html>
Related
I have made two tables, one of which does not fill the full width of the parent div.
Does anyone have a clue what's wrong? You will find below the JS fiddle code:
https://jsfiddle.net/factorbased/cps3Loa2/6
The issue seems to involve this part but I don't understand how to fix it:
<head>
<style>
table.ReturnsTable {
text-align: right;
width: 100%;
}
.tr_grey{background-color:#C0C0C0;}
.setheight{min-height: 100px; overflow: hidden;}
#pies3 div{float:left;}
#pies4 div{float:left;}
</style>
</head>
<body>
<div id="csvBar12" style="display: none;">
[wbcr_php_snippet id="972"]
</div>
<div id="pies3" class="setheight" width="100%">
<div id="chartdiv3" style="width: 500px; height: 300px; background-color: #FFFFFF;" ></div>
<div><table class="ReturnsTable" border="2">
<tr class="tr_grey"><td>Performance Statistics</td> <td>Portfolio</td> <td>Benchmark</td> <td>Difference</td> </tr>
<tr> <td>3-Month Return (%)</td> <td id="b0"></td> <td id="b1"></td><td id="b2"></td> </tr>
<tr> <td>1-Year Return (%)</td> <td id="b3"></td> <td id="b4"></td> <td id="b5"></td> </tr>
<tr> <td>3-Year Return (%)</td> <td id="b6"></td> <td id="b7"></td><td id="b8"></td></tr>
<tr> <td>5-Year Return (%)</td> <td id="b9"></td> <td id="b10"></td> <td id="b11"></td> </tr>
</table></div>
</div>
<div id="pies4" class="setheight" width="100%">
<div id="chartdiv4" style="width: 500px; height: 300px; background-color: #FFFFFF;" ></div>
<div><table class="ReturnsTable" border="2">
<tr class="tr_grey"><td>Risk Measurements</td> <td>Portfolio</td> <td>Benchmark</td> <td>Difference</td> </tr>
<tr> <td>Standard Deviation (%)</td> <td id="b12"></td> <td id="b13"></td><td id="b14" ></td> </tr>
<tr> <td>Maximum Drawdown (%)</td> <td id="b15" ></td> <td id="b16" ></td> <td id="b17"></td> </tr>
<tr> <td>Sharpe Ratio</td> <td id="b18"></td> <td id="b19"></td><td id="b20"></td></tr>
<tr> <td>Index Correlation</td> <td id="b21"></td> <td id="b22"></td> <td id="b23"></td> </tr>
</table></div>
</div>
</body>
Many thanks,
So I want to remove the extra spaces highlighted in red ink shown here:
http://i.stack.imgur.com/d7Kwo.png
When I remove the top images the table width becomes correct: 800px
but what I wanted is this:http://i.stack.imgur.com/XPsz2.jpg
Here is my current code:
<html>
<head><title>Adventure</title>
<link rel="stylesheet" type="text/css" href="STYLE04.css">
</head>
<body>
<table style="width:800px; height:600px" >
<tr>
<td colspan=3><img src="N13BANNER.PNG"></td>
<td><img src="N13LOGO.PNG"></td>
</tr>
<tr>
<td style="width:176px"><img src="N13BUTTON1.PNG"></td>
<td width=176><img src="N13IMG5.jpg"></td>
<td colspan=2 rowspan=6><img src="DUNE204.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON2.PNG"></td>
<td width=176><img src="N13IMG1.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON3.PNG"></td>
<td width=176><img src="N13IMG4.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON4.PNG"></td>
<td width=176><img src="N13IMG9.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON5.PNG"></td>
<td width=176><img src="N13IMG6.jpg"></td>
</tr>
<tr>
<td colspan=2><h1>Webpage last edited by asdf</h1></td>
</tr>
</table>
</body>
</html>
Code sample, with an update of your table layout without the images.
Is this how you want? ... then your images is to big, and pushes the cells too wide.
table {
width: 800px;
}
td {
background-color: gray;
width: 20%;
height: 85px;
}
tr:last-child td {
height: 40px;
}
img {
vertical-align: top;
}
<table>
<tr>
<td colspan=4></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan=3 rowspan=6></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>mail</td>
<td>mail</td>
</tr>
<tr>
<td colspan=2>Webpage last edited by asdf</td>
</tr>
</table>
I am generating a PDF document using DOMPDF.
The html that is being 'printed to PDF' renders as expected in a browser.
However when using DOMPDF the CSS layout is ignored. Note: When using inline CSS <td style="width:2cm;"> the document renders properly. The desired and resulting outputs are shown below. As is a snippet of the code that renders improperly.
Thanks,
Desired Output:
DOMPDF Output:
<style type="text/css">
td {
display: table-cell;
vertical-align: top;
}
.num {
width: 1cm;
}
.spc {
width: 2cm;
}
.quanda {
width: 8cm;
}
</style>
<div>
<h1>Demographics</h1>
</div>
<div>
<hr/>
</div>
<div>
<table>
<tbody>
<tr>
<td class="num">1)</td>
<td class="quanda">Study ID</td>
<td class="spc"> </td>
<td class="quanda">2349723</td>
</tr>
<tr>
<td class="num">2)</td>
<td class="quanda">Date subject signed consent</td>
<td class="spc"> </td>
<td class="quanda">12 March 2012</td>
</tr>
<tr>
<td class="num">3)</td>
<td class="quanda">Upload the patient's consent form</td>
<td class="spc"> </td>
<td class="quanda">Uploaded: URL: </td>
</tr>
<tr>
<td class="num">4)</td>
<td class="quanda">First Name</td>
<td class="spc"> </td>
<td class="quanda">Bob</td>
</tr>
<tr>
<td class="num">5)</td>
<td class="quanda">Last Name</td>
<td class="spc"> </td>
<td class="quanda">Dylan</td>
</tr>
</tbody>
</table>
</div>
This is an easy question, but I cannot seem to solve it. My html table can be seen at the following:
http://jsfiddle.net/Rochefort/kvUKG/
And also included here:
<table style="background:#fff;width:300px;margin-left:14px;" class="form">
<tbody>
<tr style="">
<td class="bosluk"></td>
<td class="alis_baslik"><strong>ALIŞ</strong></td>
<td class="satis_baslik"><strong>SATIŞ</strong></td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar">DOLAR</td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
</tbody>
</table>
I implemented CSS but the DOLLAR item has too much space. How can I remove this extra space?
You can use text-align: right with padding-right instead of padding-left.
Example: http://jsfiddle.net/BfD2v/
.ikonlar {
padding-right:5px;
font-family: Arial;
font-size:12px;
font-weigth: bold;
color: #000;
text-align: right;
}
If you want to make the whole column narrower, you can set the width od the column with this:
.bosluk, .ikonlar {
width: 10px;
}
You should also probably use <th> tags for the headers. The columns would align themselves under the <td> tags then. Like:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
The follow html will print in color in IE 9 and Word but it will not print in color for < IE or Chrome. It does however show the colors on the page (which is baffling)
<html>
<head>
<title>Style Example</title>
<style type="text/css">
table.Outer {border-style:none;background-color:transparent;}
table {border-style:none; font-family:Arial; font-size:12.0pt;}
th.TableHeader { background-color:#0066CC; color: #E7E7E7; border-style:none;}
td.LabelBlue { background-color:#0066CC; color: #E7E7E7; text-align:center;border-style:none}
td.LabelGray { background-color:#E7E7E7; color: black; text-align:right;}
td.LabelWhite { background-color:White; color: black; text-align:right;}
td.Info { background:white; color: Black; font-family:Arial; font-size:12.0pt;}
</style>
</head>
<body>
<div align="center">
<table class="Outer">
<tr align="center">
<td>
<table cellspacing = "0">
<tr>
<td class="LabelGray" colspan="1" rowspan="2">Date-Time</td>
<td class="LabelGray" colspan="7" rowspan="2" >04/30/2012 02:47:13 PM</td>
</tr>
<tr />
<tr>
<td class="LabelGray" colspan="1" rowspan="2">Temp [°C]</td>
<td class="LabelGray" colspan="1" rowspan="2">25</td>
<td class="LabelBlue" colspan="6" rowspan="1">IR Result</td>
</tr>
<tr>
<td class="LabelWhite">Voltage [V]</td>
<td>1030</td>
<td class="LabelWhite">I [µA]</td>
<td>0.076</td>
<td class="LabelWhite">IR [MΩ]</td>
<td>13553</td>
</tr>
<tr>
<td class="LabelGray" colspan="1" rowspan="2">RH [%]</td>
<td class="LabelGray" colspan="1" rowspan="2">23</td>
<td class="LabelBlue" colspan="6" rowspan="1">DA/PI Results</td>
</tr>
<tr>
<td class="LabelWhite">Voltage [V]</td>
<td>1030</td>
<td class="LabelWhite">DA Ratio</td>
<td>40.6</td>
<td class="LabelWhite">PI Ratio</td>
<td>6.9</td>
</tr>
<tr>
<td class="LabelGray" colspan="1" rowspan="2"> </td>
<td class="LabelGray"colspan="1" rowspan="2"> </td>
<td class="LabelBlue" colspan="6" rowspan="1">HiPot Results</td>
</tr>
<tr>
<td class="LabelWhite">Voltage [V]</td>
<td>5000</td>
<td class="LabelWhite">I [µA]</td>
<td>0.127</td>
<td class="LabelWhite">IR [MΩ]</td>
<td>10235</td>
</tr>
</table>
</td>
</tr>
<tr align="center">
</tr>
</table>
</div>
</body>