Here is what I need to do:
Red: two columns and two rows
Purple: two columns
Blue: two rows
yellow and white: normal cell
Here is my table so far:
Here is my html code:
<body>
<div id="container">
<table id="board">
<tr>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2" rowspan="2"></td>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td ></td>
<td colspan="2"></td>
</tr>
</table>
</div>
</body>
Here is my css:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
background-color: #114B5F;
text-align: center;
flex-direction: column;
padding-top: 2%;
}
#container {
width: 800px;
height: 500px;
background: #E4FDE1;
margin: 10px auto;
}
#board
{
width: 100%;
height: 100%;
border: 1px solid black;
}
td
{
border: 1px solid black;
}
Somehow the cell that is supposed to occupy two rows and two cells (Red in 1st image) it appears that is only occupying two rows even though the code says otherwise. Is it something on css? How can I fix this?
Your HTML did it already. To see this, do what follows. Comment the first
<td colspan="2"></td>
in the last row of your cell and substitute it with
<td></td>
<td></td>
At least as long as you have no content within any cell, the default width of the first two columns (merged by the consistent colspan="2" attributes) and the third column alone is the same so you do not notice the difference. I add a snippet just to show:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
background-color: #114B5F;
text-align: center;
flex-direction: column;
padding-top: 2%;
}
#container {
width: 800px;
height: 500px;
background: #E4FDE1;
margin: 10px auto;
}
#board {
width: 100%;
height: 100%;
border: 1px solid black;
}
td {
border: 1px solid black;
}
td.cblu{background-color:#0040ff}
td.clbl{background-color:#0080ff}
td.cred{background-color:#ff1a1a}
td.cwhi{background-color:#f8f8f8}
td.cyel{background-color:#ffff33}
<body>
<div id="container">
<table id="board">
<tr>
<td class="cblu" colspan="2"></td>
<td class="cwhi"></td>
<td class="cblu" colspan="2"></td>
</tr>
<tr>
<td class="cred" colspan="2" rowspan="2"></td>
<td class="clbl" rowspan="2"></td>
<td class="cyel"></td>
<td class="cyel"></td>
</tr>
<tr>
<td class="cyel"></td>
<td class="cyel"></td>
</tr>
<tr>
<td class="cblu"></td>
<td class="cblu"></td>
<!--<td class="cblu" colspan="2"></td>-->
<td class="cwhi"></td>
<td class="cblu" colspan="2"></td>
</tr>
</table>
</div>
</body>
Here I added the colors using some classes. I'd like to remark that no more edits to your DOM (html) is necessary to achieve what you want. But controlling responsively the width of the cells or columns of your table may not be trivial.
Related
I want to display records one by one in sequence, I do not know why the extra space appears between the records. Can anyone help me please?
{block name=head}
<style>
td {
border: none;
font-weight: bold;
font-size: 100%;
}
.h1 {
margin: 3px, 0px;
}
.content {
height: 270px;
border: 1px solid black;
font-size: 100%;
width: 80%;
margin: 0 auto;
border-top: none;
font-family: Times New Roman;
}
.footer {
height: 30px;
border: 1px solid black;
width: 80%;
margin: 0 auto;
font-family: Terminal;
}
.details-table {
border-collapse: collapse;
}
.details-table td {
border-bottom: 1px solid #666;
padding: 5px;
border-right: 1px solid #666;
}
.details-table td.no-right-border {
border-right: none;
}
.details-table td.no-bottom-border {
border-bottom: none;
}
</style>
{/block}
{block name=body}
<div class="footer">
<table align="center" width="80%">
<tr>
<td style="text-align:left;">Name : {$partyName}</td>
<td style="text-align:center;">Date : {$salesDate}</td>
<td style="text-align:right;">Fine : {$totFine|string_format:"%.3f"}</td>
</tr>
</table>
</div>
<div class="content">
<table align="center" width="100%" class="details-table">
<tr height="30">
<td>Item</td>
<td style="text-align:center;">Gross</td>
<td style="text-align:center;">Less</td>
<td style="text-align:center;">Net</td>
<td style="text-align:center;">Touch</td>
<td style="text-align:center;">Wastage</td>
<td style="text-align:center;">Fine</td>
</tr>
{section name="sec" loop=$dtArray}
<tr>
<td valign="top" class="no-bottom-border">{$dtArray[sec].itemId}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$hsnCode}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$fine}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$rate}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$amount|string_format:"%.2f"}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$amount|string_format:"%.2f"}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$amount|string_format:"%.2f"}</td>
</tr>
{/section}
</table>
</div>
{/block}
You have height:270px set on the <div class="content">, and height="100%" set on the <table>, and the table is an immediate child of that div, so it inherits the height. That's why you're seeing the extra space when there are only a couple of rows. Simply reset or remove either of the height value to fix that.
EDIT
In the other case, if you want to keep the height set on the table, and only have the empty space to display at the bottom, you can add an empty row and set it to height:100%.
.details-table {
height: 270px;
width: 80%;
margin: 0 auto;
border-collapse: collapse;
}
.details-table td {
border: 1px solid #666;
padding: 5px;
}
<table class="details-table">
<tr>
<td>Item</td>
<td>Gross</td>
<td>Less</td>
<td>Net</td>
<td>Touch</td>
<td>Wastage</td>
<td>Fine</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<!-- insert empty row -->
<tr style="height:100%;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Why z-index is not working inside table?
I have a table with 4 column that one column is positioned outside of table, so that it seem as tabs, but I cannot hidden right side of tabs under table.
Please see this code snippet:
div {
position: relative;
z-index: 5;
width: 70%;
margin: auto;
height: 500px;
background-color: red;
}
table {
border: none;
border-spacing: 0 11px;
width: 100%;
table-layout: fixed;
}
td.tab {
background-color: white;
padding: 15px;
width: 20%;
position: absolute;
z-index: -15;
right: 90%;
}
td.plan {
padding: 15px;
width: 33.3%;
text-align: center;
}
<div class="bottom">
<table>
<tbody>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
</tbody>
</table>
</div>
fiddle code
EDIT: I no want tabs, I will add our plans to site.
I update fiddle, I want remove this shadow on right side of tabs.
Your td tabs are positioned absolutely but relative to the div.bottom.
Easiest is to remove the z-index on the parent.
Fiddle: https://jsfiddle.net/abhitalks/bxzomqct/7/
Snippet:
div {
position: relative;
width: 70%;
margin: auto;
height: 500px;
background-color: red;
}
table {
border: none;
border-spacing: 0 11px;
width: 100%;
table-layout: fixed;
}
td.tab {
background-color: #eee;
padding: 15px;
width: 20%;
position: absolute;
z-index: -15;
right: 90%;
}
td.plan {
padding: 15px;
width: 33.3%;
text-align: center;
}
<div class="bottom">
<table>
<tbody>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
</tbody>
</table>
</div>
Better still, to avoid confusions, Just wrap your entire construct in another div and position the tabs relative that outer div.
div.top {
position: relative;
width: 70%;
margin: auto;
}
div.bottom {
background-color: red; z-index: 50; height: 500px;
}
table {
border: none;
border-spacing: 0 11px;
width: 100%;
table-layout: fixed;
}
td.tab {
background-color: #eee;
padding: 15px;
width: 20%;
position: absolute;
z-index: -150;
right: 90%;
}
td.plan {
padding: 15px;
width: 33.3%;
text-align: center;
}
<div class="top">
<div class="bottom">
<table>
<tbody>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
</tbody>
</table>
</div>
</div>
Your Fiddle: https://jsfiddle.net/abhitalks/bxzomqct/6/
Why this happens:
This is because of the stacking context that is generated by the positioned elements. Although, the stacking order within a stacking context specifies the negative z-index values to be painted first, it is however limited to that same stacking context.
Reference: https://www.w3.org/TR/CSS2/zindex.html
Reading: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
So, with a negative z-index, your tabs should appear behind its parents (div.bottom in this case). And it will, as it is in same stacking context.
However, as soon as you give a z-index value to the div.bottom, it creates a new stacking context which confines all of its child elements to a particular place in the stacking order. This causes it not to appear in front of the tabs irrespective of the z-index of tabs.
Note that the specs do not explain this verbatim, and has to be referred to with other references and docs to develop an understanding. It's tricky.
Here is a good article you can refer to: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
In your example, z-index won't work because you use it with two elements which are not in the same level in the DOM.
To make it works, you can place the two element with relative or absolute position in the same DOM level.
Doc about z-index: https://stackoverflow.com/a/2305711/6028607
div {
position: relative;
z-index: 5;
width: 70%;
margin: auto;
height: 500px;
background-color: red;
}
table {
border: none;
border-spacing: 0 11px;
width: 100%;
table-layout: fixed;
}
td.tab {
background-color: white;
padding: 15px;
width: 20%;
position: absolute;
z-index: -15;
right: 90%;
}
td.plan {
padding: 15px;
width: 33.3%;
text-align: center;
z-index: 0;
position: relative;
}
.test { z-index: 0; position: absolute; top: 200px; background:yellow; width: 100%; left: 0; height: 40px; padding: 10px; }
<div class="bottom">
<table>
<tbody>
<tr>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
</tbody>
</table>
</div>
<div class="test">test</div>
I have a table of fixed width and height containing three rows and columns. Rows and columns are automatically equal size, but when I put innerHTML (or image) into table cell, cell with text inside expands at the cost of other columns. How to prevent table cells from expanding after inserting content inside? I've tried solutions from similar stack overflow questions, but nothing worked.
JS fiddle: https://jsfiddle.net/m20akmdx/14/
document.getElementById('8').innerHTML = 'R';
table {
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
Try using fixed table layout.
table {
table-layout: fixed;
...
}
And adding a no-break space into each cell.
td:after {
content: "\00A0";
}
document.getElementById('8').innerHTML = 'R';
table {
table-layout: fixed;
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
}
td:after {
content: "\00A0";
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
Set the width and height of the td elements rather than a width and height for the table and you will get the desired behaviour.
document.getElementById('8').innerHTML = 'Raaaa';
table{
border: 1px solid black;
border-collapse: collapse;
}
td{
width:120px;
height:120px;
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
set a max-width
td{
border: 1px solid black;
text-align: center;
max-width: 200px;
}
or
td{
border: 1px solid black;
text-align: center;
max-width: 30%;
}
You will need to specify the td width, and maybe the height as well:
https://jsfiddle.net/m20akmdx/23/
document.getElementById('8').innerHTML = 'my long text gets wrapped';
table {
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
width: calc(100% / 3);
height: calc(100% / 3);
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
I am trying to overwrite a td style like this:
.valuator .sw-slots table, tr, td { width 100% }
so I did this:
td.license-name-td{
width: 100px !important;
}
The table took always the "global" style and overwrites, rather ignores my style. Even chrome doesn't cross the link out, it just ignores that part.
td.license-name-td {
width: 100px !important
}
.valuator .sw-slots table, tr, td {
width: 100%;
}
(Chrome computed css output)
Is there a special way to overwrite the td tag afterwards?
.valuator .sw-slots table, tr, td {
width: 100%;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
border-collapse: collapse;
border-spacing: 0;
text-align: right;
color: #3c3c3c;
}
table.license-table td.license-name-td {
text-align: left !important;
word-break: break-word;
overflow: hidden;
width: 100px !important;
}
table.license-table td.license-td {
text-align: left !important;
margin-left: 3px;
word-break: break-word;
}
<table class="t3lsg license-table" style="font-size: 12px;">
<tbody><tr>
<th style="text-align: left;">Software</th>
<th style="text-align: left;">Version</th>
<th style="text-align: left;">Source</th>
<th style="text-align: left;">License</th>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">Fleck</td>
<td class="license-td">0.9.6.19</td>
<td class="license-td">https://github.com/statianzo/Fleck</td>
<td class="license-td">MIT License</td>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">HTML Agility Pack</td>
<td class="license-td">HAP 1.4.6</td>
<td class="license-td">http://code.google.com/p/heartcode-canvasloader/</td>
<td class="license-td">Microsoft Public License </td>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">jQuery</td>
<td class="license-td">1.10.2002</td>
<td class="license-td">http://jquery.com</td>
<td class="license-td">MIT License</td>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">jQuery Knob</td>
<td class="license-td">11.2.8</td>
<td class="license-td">http://anthonyterrien.com/knob</td>
<td class="license-td">MIT License</td>
</tr>
</table>
EDIT: I changed one mistake, that i forgot to change one inline style to a class, now this is the new result.
First, in your example code, I added the two enclosing div's (.valuator, .sw-slots) so that the first CSS rule applies to the table.
After that, you need to make sure that the widths of the table cell are set to a default of auto except for td.license-name-td which had a 100px width.
You need to reset the td for the separator td[colspan="4"] to width: auto and then the same for td.license-td.
I think this is what you need. Just be on the look out for other CSS rules that might be in hour style sheets that might override these.
.valuator .sw-slots table, tr, td {
width: 100%;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
border-collapse: collapse;
border-spacing: 0;
text-align: right;
color: #3c3c3c;
}
td[colspan="4"] {
width: auto;
}
td.license-name-td {
text-align: left;
word-break: break-word;
overflow: hidden;
width: 100px;
background-color: lightblue;
}
td.license-td {
text-align: left;
margin-left: 3px;
word-break: break-word;
width: auto;
}
<div class="valuator">
<div class="sw-slots">
<table class="t3lsg" style="font-size: 12px;">
<tbody>
<tr>
<th style="text-align: left;">Software</th>
<th style="text-align: left;">Version</th>
<th style="text-align: left;">Source</th>
<th style="text-align: left;">License</th>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">Fleck</td>
<td class="license-td">0.9.6.19</td>
<td class="license-td">https://github.com/statianzo/Fleck</td>
<td class="license-td">MIT License</td>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">HTML Agility Pack</td>
<td class="license-td">HAP 1.4.6</td>
<td class="license-td">http://code.google.com/p/heartcode-canvasloader/</td>
<td class="license-td">Microsoft Public License</td>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">jQuery</td>
<td class="license-td">1.10.2002</td>
<td class="license-td">http://jquery.com</td>
<td class="license-td">MIT License</td>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">jQuery Knob</td>
<td class="license-td">11.2.8</td>
<td class="license-td">http://anthonyterrien.com/knob</td>
<td class="license-td">MIT License</td>
</tr>
</table>
</div>
</div>
i've added a class name to my table and changed the class names to:
table.license-table td.license-td{
text-align: left !important;
margin-left:3px;
word-break: break-word;
width: 100px !important;
}
table.license-table td.license-name-td{
text-align: left !important;
word-break: break-word;
overflow: hidden;
width: 100px !important;
}
this solves my problem.
The problem is that the width: 100% also applies to the table. And because a all cells in a row must count up to the width of the table, it will not work to just restrict the width of the cell, you also must address the table, or the other cells in the row.
I do not know what your HTML looks like, but if the cell is the only one in the row, you could add a class to the table instead of the cell and set the width of the table to 100px in the same way as you did for the cell, you do not have to restrict the width of the cell than, as that will be automatically.
The following does not achieve the result
<tr><td colspan="4">Title</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td width="33.33%">1</td><td width="33.33%">2</td><td width="33.33%">3</td></tr>
<tr><td width="33.33%"> </td><td width="33.33%"></td><td width="33.33%"></td></tr>
The there is an extra space after the third cell to take into account the 4th column. How can I remove this so that the entire row is equally divided into three cells that fill it?
For equal widths you should create 2 table like this:
<table>
<tr><td colspan="4">Title</td></tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Here is the fiddle: http://jsfiddle.net/Q57gW/2/
The best answer would be to not use table. If you REALLY need that table, one (very messy) soultion could be to have 12 columns in each row, and have colspan="3" in your first row, and colspan="4" in your other rows.
jsfiddle link for this solution
<table><tbody>
<tr>
<td style="border: 1px solid #333; width: 240px;" colspan="12">Title</td>
</tr>
<tr>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
</tr>
<tr>
<td style="border: 1px solid #333; width: 80px;" colspan="4">1</td>
<td style="border: 1px solid #333; width: 80px;" colspan="4">2</td>
<td style="border: 1px solid #333; width: 80px;" colspan="4">3</td>
</tr>
</tbody></table>
But I would HEAVILY advice you to use divs or spans or something else than table cells. Here's a much nicer solution using paragraphs:
jsfiddle link
html:
<div style="width: 240px;">
<p class="onecell">Title</p>
<p class="fourcell">1</p><p class="fourcell">1</p><p class="fourcell">1</p><p class="fourcell">1</p>
<p class="threecell">1</p><p class="threecell">2</p><p class="threecell">3</p>
</div>
css:
p {
float: left;
border: 1px solid #333;
box-sizing: border-box;
padding: 0;
margin: 0;
}
p.onecell {
width: 100%;
}
p.fourcell {
width: 25%;
}
p.threecell {
width: 33%;
}