I am trying to process an XML file via XSLT to produce an HTML report. The report contains a table with 3 columns: Description, Date and Note. One row of this table may contain one description, but multiple dates and notes. The dates and notes for a single description form pairs, but sometimes either a date or a note is missing. I could have the following problems:
A note does not have a corresponding date, so the date-note pair representation is skewed (See Date 1.2 and Note 1.2 in the example). A desired representation would have an empty line followed by Date 1.2 on a different line.
A note spans multiple lines, but its corresponding date does not, so the following notes are not aligned with their dates.
Here is an example. I used <br/> elements for demonstration purposes.
<table>
<tr>
<td class="firstcolumn">Description</td>
<td>Date</td>
<td class="lastcolumn">Note</td>
</tr>
<tr>
<td class="firstcolumn">Description 1. Could span multiple lines.</td>
<td valign="top" align="right">Date 1.2</td>
<td valign="top" align="right" class="lastcolumn">Note without date 1.1<br/> Note 1.2</td>
</tr>
<tr>
<td class="firstcolumn">Description 2.</td>
<td valign="top" align="right">Date 2.1<br/> Date 2.2</td>
<td valign="top" align="right" class="lastcolumn">Some really long note<br/>spanning multiple lines 2.1<br/> Note 2.2</td>
</tr>
</table>
Here is a link to a fiddle: JSFiddle.
I tried to solve this with nested tables: for each row of the outer table, I created a nested table with 2 columns, each row of which contained a date-note pair (or an empty cell and a note). The dates and notes now align. However, the nested table column widths do not align across the rows of the outer table. I tried to solve this by setting all nested table widths using the styles
table { width:100%;table-layout:fixed;} /* for each nested table */
td {width:90px;} /* for the columns of nested tables */
The columns now align. However, sometimes the notes are cut off and not visible (using the overflow style I can make them appear outside the table border, but it looks ugly). Ideally, I would want to have column widths that adjust to the notes' lengths.
I think I made it!
What I did is:
I broke the 2nd and 3rd rows in two
to the first one I gave rowspan="2"
I created two classes: bt and bb
table {
border-collapse: collapse;
width: 75%;
}
td {
border-collapse: collapse;
border: 1px solid black;
padding: 0px;
margin: 0px;
font-family: Calibri;
}
td.firstcolumn {
width: 60%;
}
td.lastcolumn {
width: 25%;
}
.bt {
border-top: 0;
}
.bb {
border-bottom: 0;
}
<table>
<tr>
<td class="firstcolumn">Description</td>
<td>Date</td>
<td class="lastcolumn">Note</td>
</tr>
<tr>
<td rowspan="2" class="firstcolumn">Description 1. Could span multiple lines.</td>
<td class="bb" valign="top" align="right"></td>
<td class="bb" valign="top" align="right">Note without date 1.1</td>
</tr>
<tr>
<td class="bt" valign="top" align="right">Date 1.2</td>
<td class="bt" valign="top" align="right" class="lastcolumn"> Note 1.2</td>
</tr>
<tr>
<td rowspan="2" class="firstcolumn">Description 2.</td>
<td class="bb" valign="top" align="right">Date 2.1</td>
<td class="bb" valign="top" align="right" class="lastcolumn">Some really long note<br/>spanning multiple lines 2.1</td>
</tr>
<tr>
<td class="bt" valign="top" align="right"> Date 2.2</td>
<td class="bt" valign="top" align="right" class="lastcolumn">Note 2.2</td>
</tr>
</table>
Here's a fiddle
Assuming that you need to adjust width automatically based on contents try changing in example provided here
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_width
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td width="70%">January</td>
<td width="30%">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<p>The width attribute is not supported in HTML5. Use CSS instead.</p>
</body>
</html>
Related
The example below contains two tables, and each table includes two sections. Both tables and sections are structurally the same.
When the cells in the first table that are marked with class ".to-hide" are hidden by changing this class to ".hide" (shown in the second table), the resulting layout of the second table appears inconsistent; the cell "4" in the first section closes all gaps left by the hidden cells, but cell "4" in the second section leaves open gaps.
On Chrome 68.0.3440.106, the code snippet below shows how one cell "4" fill open gaps, but the other cell "4" does not. On Firefox 60.0.2, both cells "4" leave open gaps. The image below is taken on Chrome 68.
How can I ensure that visible cells in the table cover any gaps left by hidden cells, consistently, across browsers?
/* Styles to mark and hide marked cells. */
.to-hide { background-color: lightgray; }
.hide { display: none; }
/* Styles to make the tables in the code snippet look pretty. */
.left { display: inline-block; }
.right { display: inline-block; margin-left: 20px; }
table { background-color: yellow; }
td { padding: 0 1em; background-color: white; border: solid 1px gray; }
<div class="left">
Original table:
<table>
<tbody>
<tr>
<td rowspan="3">1</td>
<td rowspan="2">.<br/>2<br/>.</td>
<td class="to-hide">3</td>
<td>4</td>
</tr>
<tr>
<td class="to-hide">a</td>
<td class="to-hide">b</td>
</tr>
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td colspan="4">i</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td rowspan="2">.<br/>2<br/>.</td>
<td class="to-hide">3</td>
<td>4</td>
</tr>
<tr>
<td class="to-hide">a</td>
<td class="to-hide">b</td>
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td colspan="4">i</td>
</tr>
</tbody>
</table>
</div>
<div class="right">
Shaded cells hidden (notice cells "4"):
<table>
<tbody>
<tr>
<td rowspan="3">1</td>
<td rowspan="2">.<br/>2<br/>.</td>
<td class="hide">3</td>
<td>4</td>
</tr>
<tr>
<td class="hide">a</td>
<td class="hide">b</td>
</tr>
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td colspan="4">i</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td rowspan="2">.<br/>2<br/>.</td>
<td class="hide">3</td>
<td>4</td>
</tr>
<tr>
<td class="hide">a</td>
<td class="hide">b</td>
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td colspan="4">i</td>
</tr>
</tbody>
</table>
</div>
By hiding cells "a" and "b" rowspan="3" of cell "1" wants to occupy the same area like cell "i". Cell "i" can not span 3 rows since there are only 3 rows left and on the last row spans cell "i" all columns.
Forcing hidden cells to a size of 0 does not help.
.hide {
visibility: hidden;
width: 0;
height: 0;
padding: 0;
}
Taking hidden cells out of flow by position: absolute does not help either.
That the first section of the table still looks good (no gaps) must be some kind of error correction by browser.
Only by removing hidden cells from the table and changing the values for rowspan and colspan I was able to achieve the intended distribution of cells.
<tr>
<td rowspan="2">1</td>
<td>.<br/>2<br/>.</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td colspan="3">i</td>
</tr>
How is that possible that this work:
<TABLE>
<TR>
<TD onclick="play('cell1')" id="cell1">-</TD>
<TD onclick="play('cell2')" id="cell2">-</TD>
<TD onclick="play('cell3')" id="cell3">-</TD>
</TR>
<TR>
<TD onclick="play('cell4')" id="cell4">-</TD>
<TD onclick="play('cell5')" id="cell5">-</TD>
<TD onclick="play('cell6')" id="cell6">-</TD>
</TR>
<TR>
<TD onclick="play('cell7')" id="cell7">-</TD>
<TD onclick="play('cell8')" id="cell8">-</TD>
<TD onclick="play('cell9')" id="cell9">-</td>
</TR>
but if I put spaces between "-" it doesn't. I knew that it doesn't matter in HTML the position of elements(I mean, in this case). Why?
CSS solution:
If I get it right, you want to put - between two spaces, so you will simply need to simulate this using padding: 0px 5px; with your td elements, this is a snippet DEMO:
table td {
padding: 0px 5px;
}
<TABLE>
<TR>
<TD onclick="play('cell1')" id="cell1">-</TD>
<TD onclick="play('cell2')" id="cell2">-</TD>
<TD onclick="play('cell3')" id="cell3">-</TD>
</TR>
<TR>
<TD onclick="play('cell4')" id="cell4">-</TD>
<TD onclick="play('cell5')" id="cell5">-</TD>
<TD onclick="play('cell6')" id="cell6">-</TD>
</TR>
<TR>
<TD onclick="play('cell7')" id="cell7">-</TD>
<TD onclick="play('cell8')" id="cell8">-</TD>
<TD onclick="play('cell9')" id="cell9">-</td>
</TR>
</TABLE>
This will show - as " - " inside the td elements.
HTML solution:
If you want to use HTML only without CSS, the solution will be to use cellpadding=5 with your table, this is a working snippet:
<TABLE CELLPADDING=10>
<TR>
<TD onclick="play('cell1')" id="cell1">-</TD>
<TD onclick="play('cell2')" id="cell2">-</TD>
<TD onclick="play('cell3')" id="cell3">-</TD>
</TR>
<TR>
<TD onclick="play('cell4')" id="cell4">-</TD>
<TD onclick="play('cell5')" id="cell5">-</TD>
<TD onclick="play('cell6')" id="cell6">-</TD>
</TR>
<TR>
<TD onclick="play('cell7')" id="cell7">-</TD>
<TD onclick="play('cell8')" id="cell8">-</TD>
<TD onclick="play('cell9')" id="cell9">-</td>
</TR>
</TABLE>
But this will make spaces between tr elements too, in other words it will make padding-top and padding-bottom too for your td elements.
Conclusion:
So your requirements will be better achieved using paddingin CSS, now it's up to you to choose the right solution.
My default table looks like this, with 4 separate cells:
I want to create a table with this schema (merge r1c1 & r1c2 &r2c2):
My default table code is:
<table border="2">
<caption style="border: 1px dotted;">Table 1</caption>
<tr>
<td>r1c1</td>
<td>r1c2</td>
</tr>
<tr>
<td>r2c1</td>
<td>r2c2</td>
</tr>
</table>
And my merged table code look like this (but doesn't do what I wanted!):
<table border="2">
<caption style="border: 1px dotted;">Table 1</caption>
<tr>
<td colspan="2" rowspan="2">r1c1 & r1c2 & r2c2</td>
</tr>
<tr>
<td >r2c1</td>
</tr>
</table>
How do I get those three cells merged using colspan and rowspan?
No you cannot implement this with table cells. However, A similar layout can be displayed using css styles as shown in this fiddle.
html
<table border="2">
<caption style="border: 1px dotted;">Table 1</caption>
<tr>
<td id="r1c1" colspan="2">r1c1 & r1c2</td>
</tr>
<tr>
<td>r2c1</td>
<td id="r2c2" rowspan="2">r2c2</td>
</tr>
</table>
css
#r1c1 {
border: none !important;
}
#r2c2 {
border: none !important;
}
You can create a similar L shape using div tags by applying similar css styles as shown in this fiddle. Also you can refer this link to find css styles for creating various shapes.
I am trying to make an organisational chart in HTML. The code is fairly simple, but I have some problems with the rendering in Chrome/Safari and Opera.
Here is what the result should look like, as it works in Firefox and IE:
Here is in Chrome and Safari
And here is in Opera:
The problem comes from the border-collapse: collapse property in CSS. If I use the old coding style cellspacing="0" cellpadding="0"it works more or less, but is not valid in HTML5.
I created a jsFiddle to show the problem: http://jsfiddle.net/aGVp4/7/
My HTML:
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"></td>
<td colspan="2" class="case"></td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2" class="case"></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td colspan="3" class="right bottom"></td>
<td colspan="3" class="bottom"></td>
<td></td>
</tr>
<tr> <!-- No colspan here, to make the layout symmetrical -->
<td class="right"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="right"></td>
<td></td>
</tr>
<tr>
<td colspan="2" class="case"></td>
<td colspan="4"></td>
<td colspan="2" class="case"></td>
</tr>
</table>
And my CSS:
.orgchart {
border-spacing: 0;
border-collapse: collapse;
}
td {
width: 3em;
height: 1em;
}
td.case {
border: 1px solid black;
}
td.right {
border-right: 1px solid black;
}
td.bottom {
border-bottom: 1px solid black;
}
td.top {
border-top: 1px solid black;
}
The problems seems to be caused by different interpretations of the collapsing border model in browsers. The border conflict resolution is defined in terms of cells, not slots, and when you use colspan=3, one cell spans 3 slots.
The 2nd cell of the 2nd row has a solid bottom border, and the 2nd cell of the 3rd row has no top border. When borders collapse, solid wins none. But the cells are only partially adjacent, as they span different columns. Browsers hand this differently. Chrome makes the border span all the columns of the upper cell, whereas Firefox makes the border span only one column, the one that the cells share – which is more reasonable, but CSS 2.1 seems to leave the issue open.
I tried playing with border: hidden, which helps on Chrome but causes new problems on Opera.
It seems that there are two options. You could use the HTML attributes, if they do the job. Though declared obsolete and forbidden in HTML5 CR, the same document also requires continued support to them in browsers.
But a cleaner, and perhaps more robust, approach is to avoid the problem by adding more empty cells. This means dividing two 3rd row cells into two cells so that only one of them shares a border with the cell of the 2nd row. This makes the table even more grid-like, but not essentially more complex:
<table class="orgchart">
<tr>
<td colspan="3"></td>
<td colspan="2" class="case"></td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2" class="case" ></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td colspan="2" class="bottom"></td>
<td class="right bottom"></td>
<td class="bottom" ></td>
<td colspan="2" class="bottom" ></td>
<td></td>
</tr>
<tr> <!-- No colspan here, to make the layout symmetrical -->
<td class="right"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="right"></td>
<td></td>
</tr>
<tr>
<td colspan="2" class="case"></td>
<td colspan="4"></td>
<td colspan="2" class="case"></td>
</tr>
</table>
Add a new empty row <tr></tr> under the colspan will fix this problem (not a beautiful solution but works).
I played with your jsfiddle, and found a hack to fix the issue in Chrome and Safari.
Also works on FF and IE, but didn't test on Opera.
Try this (jsfiddle):
td.bottom {
border-top: 1px solid white; // this is the hack
border-bottom: 1px solid black;
}
td.right.bottom {
border-top: none; // fix for IE
}
As this is a hack, it may not work as your chart grows complex, but hope this helps in short-term.
I'm encountering a problem when styling an dynamic generated table. The user can choose how many columns there have to be, some of them have got a fixed length. How can I let the other give a percentage of the space left, without having to specify the exact width of the columns every time AND without ending up with different column widths with different data/different browsers?
Example:
<style type="text/css">
table{
width:800px;
border:1px solid #CCCCCC;
/* table-layout: fixed; */
}
table td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border:1px solid #EEEEEE;
}
table tbody td.active{
text-align:center;
width:100px; /* fixed */
}
table tbody td.option{
width:100px; /* fixed */
}
table tbody td.nonfixed{
width:auto;
}
</style>
<table>
<thead>
<tr>
<td>Name</td>
<td>Description</td>
<td>Active</td>
<td colspan="2">Options</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">+ Add new row<td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="nonfixed">[Name 1]</td>
<td class="nonfixed">[Description 1]</td>
<td class="active">[X]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
<tr>
<td class="nonfixed">[Name 2]</td>
<td class="nonfixed">[Description 2]</td>
<td class="active">[0]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
</tbody>
</table>
In the example both "nonfixed" columns should have the exact same width. This should also work when the user adds a nonfixed column or switches the first column with the last etc.
Who's able to help me out?
I see two possible approaches... either use a script to calculate the flexible-width columns' widths and average them, or use nested tables to split the two flex cols at 50%:
<table>
<tr>
<td class="fixed"></td>
<td class="fixed"></td>
<td class="fixed"></td>
<td class="flex-wrapper">
<table width="100%">
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
</td>
</tr>
</table>