The following HTML code displays the value of Heading9 and Heading10 in a separate row instead of displaying right after Heading8 (see ActualOutput image)
Code 1:
<html><body bgcolor="#E6E6FA">
<TABLE cellpadding="5" style="border: 1px solid #000000; border-collapse: collapse;" border="2">
<TH>Heading1</TH>
<TH>Heading2</TH>
<TH>Heading3</TH>
<TH>Heading4</TH>
<TH>Heading5</TH>
<TH>Heading6</TH>
<TH>Heading7</TH>
<TH>Heading8</TH>
<TH>Heading9</TH>
<TH>Heading10</TH>
<TH colspan="20">Heading11</TH>
</TR>
<tbody>
<TR>
<TD rowspan="2">knnjkn</TD>
<TD>ceecev</TD>
<TD>lnlnlkn</TD>
<TD>lknlkn</TD>
<TD>lknkn</TD>
<TD>kjnkljnk</TD>
<TD>lknlkn</TD>
<TD>kjnlkn</TD>
<TD>kjbkn</TD>
</TR>
<TR>
<TD>jknklnk</TD>
<TD>kjnlknknm</TD>
<TD>jnkj n</TD>
<TD>lnnkkl</TD>
<TD>kjnknkj</TD>
<TD>sdwewcw</TD>
<TD>qwdcwcwc</TD>
<TD>csdcs</TD>
</TR>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</tbody>
<tbody>
<TR>
<TD rowspan="2">ddccs</TD>
<TD>csdcs</TD>
<TD>csdcs</TD>
<TD>cswewc</TD>
<TD>csdcsdc</TD>
<TD>cdwdc</TD>
<TD>cdsc</TD>
<TD>zcxascsac</TD>
<TD>csdcdc</TD>
</TR>
<TR>
<TD>dadcc</TD>
<TD>csdc</TD>
<TD>cacsc</TD>
<TD>cdwcc</TD>
<TD>csdd</TD>
<TD>csdc</TD>
<TD>sdcsdc</TD>
<TD>cdscsd</TD>
</TR>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</tbody>
</TABLE>
</html>
Actual Output:
I can get the desired output by changing the code 1 to code 2, however, my bash script gathers Heading9 and Heading10 data only after Heading8 is framed for each body, so I cannot inject Heading9 and 10 in between.
Appreciate if experts can provide a better solution to get the expected output by restructuring the code 1. Unfortunately, code 2 doesn't work in my scenario.
Code 2:
<html><body bgcolor="#E6E6FA">
<TABLE cellpadding="5" style="border: 1px solid #000000; border-collapse: collapse;" border="2">
<TH>Heading1</TH>
<TH>Heading2</TH>
<TH>Heading3</TH>
<TH>Heading4</TH>
<TH>Heading5</TH>
<TH>Heading6</TH>
<TH>Heading7</TH>
<TH>Heading8</TH>
<TH>Heading9</TH>
<TH>Heading10</TH>
<TH colspan="20">Heading11</TH>
</TR>
<tbody>
<TR>
<TD rowspan="2">knnjkn</TD>
<TD>ceecev</TD>
<TD>lnlnlkn</TD>
<TD>lknlkn</TD>
<TD>lknkn</TD>
<TD>kjnkljnk</TD>
<TD>lknlkn</TD>
<TD>kjnlkn</TD>
<TD>kjbkn</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</TR>
<TR>
<TD>jknklnk</TD>
<TD>kjnlknknm</TD>
<TD>jnkj n</TD>
<TD>lnnkkl</TD>
<TD>kjnknkj</TD>
<TD>sdwewcw</TD>
<TD>qwdcwcwc</TD>
<TD>csdcs</TD>
</TR>
</tbody>
<tbody>
<TR>
<TD rowspan="2">ddccs</TD>
<TD>csdcs</TD>
<TD>csdcs</TD>
<TD>cswewc</TD>
<TD>csdcsdc</TD>
<TD>cdwdc</TD>
<TD>cdsc</TD>
<TD>zcxascsac</TD>
<TD>csdcdc</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</TR>
<TR>
<TD>dadcc</TD>
<TD>csdc</TD>
<TD>cacsc</TD>
<TD>cdwcc</TD>
<TD>csdd</TD>
<TD>csdc</TD>
<TD>sdcsdc</TD>
<TD>cdscsd</TD>
</TR>
</tbody>
</TABLE>
</html>
Expected Output:
Add Following may this help...
<style>
table
{
border: 1px solid #000000;
border-collapse: collapse;
display:table;
position:relative;
width:100%;
}
table tr
{
display: table-row;
height: 35px;
line-height: 30px;
width: 100%;
}
table td
{
direction: ltr;
display: table-cell;
margin: 0;
padding: 5px;
table-layout: fixed;
}
</style>
Related
So I have the following table that I have created using HTML and CSS: However, I would like the three pieces of information under Harvesting to be split divided evenly so that each cell takes the same amount of space in the Harvesting column. Right now, the table cell with electroflocculation takes up the space of 2 cells because I assigned it to temporarly do so using the rowspan attribute when it should ideally be taking up the space of 4/3 of a cell,
<html>
<head>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12 px;
color: #111111;}
th {
letter-spacing: 0.1em;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
}
.ExtractionConversion {
background-color: #f4cccc;
}
.Cultivation {
background-color: #d9ead3;
}
.Harvesting {
background-color: #fce5cd;
}
.Dewatering {
background-color: #c9daf8;
}
.Extraction {
background-color: #d9d2e9;
}
.Conversion {
background-color: #fff2cc;
}
</style>
</head>
<body>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td class="Harvesting">Centrifugation</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Harvesting">Electrocoagulation</td>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Harvesting">Electroflocculation</td>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<body>
</html>
You can insert another table in that and style the cells, adding borders to get it done. It's not pretty but it works.
<html>
<head>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12 px;
color: #111111;}
th {
letter-spacing: 0.1em;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
}
.ExtractionConversion {
background-color: #f4cccc;
}
.Cultivation {
background-color: #d9ead3;
}
.Harvesting {
background-color: #fce5cd;
}
.Dewatering {
background-color: #c9daf8;
}
.Extraction {
background-color: #d9d2e9;
}
.Conversion {
background-color: #fff2cc;
}
</style>
</head>
<body>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td class="Harvesting">Centrifugation</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Harvesting">Electrocoagulation</td>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Harvesting">Electroflocculation</td>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<br>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td rowspan="4" class="Harvesting" style="padding:0;">
<table cellpadding=0 cellspacing=0 width=100% height=100% style="text-align: center">
<tr>
<td class="Harvesting" style="border-bottom:2px solid white;">Centrifugation</td>
</tr>
<tr>
<td class="Harvesting" style="border-bottom:2px solid white;">Electrocoagulation</td>
</tr>
<tr>
<td class="Harvesting">Electroflocculation</td>
</tr>
</table>
</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<br>
<body>
</html>
I am working on a system (maybe you guessed it from the snippet, it's confluence) and try to style tables.
Important
I have no chance to modify the table-html output, I can only add some CSS styles. The tables can occur in every combination on a page and are added by users.
This is the structure and possible table comibnations - this is only an example - there are other combinations.
.confluenceTable {
border-collapse: collapse;
}
.confluenceTh, .confluenceTd {
padding: 6px 8px;
border: 1px solid #888a85;
border-right: none;
border-bottom: none;
}
table.confluenceTable tr:first-child .confluenceTh,
table.confluenceTable tr:first-child .confluenceTd {
border-top: none;
}
.confluenceTh:first-child, .confluenceTd:first-child {
border-left: none;
}
table.confluenceTable thead tr:first-child .confluenceTh {
border-bottom: 2px solid #CC0018;
}
table.confluenceTable tr .confluenceTh + :not(.confluenceTh) {
border-left: 2px solid #CC0018;
}
<h2>First</h2>
<p>table without headers</p>
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd">1.1</td>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Second</h2>
<p>table with column header</p>
<table class="confluenceTable">
<thead>
<tr>
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Third</h2>
<p>table with row header</p>
<table class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh">1.1</th>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Fourth</h2>
<p>table with row and column header</p>
<table class="confluenceTable">
<thead>
<tr>
<!-- This element should also have a border right -->
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
The Problem is the Fourth table - I found no way to add a border-right to 1.1, which is column and row header. Does anyone see a pure CSS solution?
In a future step, there might also be headers in the middle of a table...
Make use of nth-of-type pseudo selector as below to select 4th table and add border to right-side of th first-child.
The :nth-of-type(an+b) CSS pseudo-class matches an element that has
an+b-1 siblings with the same element name before it in the document
tree, for a given positive or zero value for n, and has a parent
element.
table.confluenceTable:nth-of-type(4) > thead > tr > th:first-child{
border-right:2px solid #CC0018;
}
.confluenceTable {
border-collapse: collapse;
}
.confluenceTh, .confluenceTd {
padding: 6px 8px;
border: 1px solid #888a85;
border-right: none;
border-bottom: none;
}
table.confluenceTable tr:first-child .confluenceTh,
table.confluenceTable tr:first-child .confluenceTd {
border-top: none;
}
.confluenceTh:first-child, .confluenceTd:first-child {
border-left: none;
}
table.confluenceTable thead tr:first-child .confluenceTh {
border-bottom: 2px solid #CC0018;
}
table.confluenceTable tr .confluenceTh + :not(.confluenceTh) {
border-left: 2px solid #CC0018;
}
table.confluenceTable:nth-of-type(4) > thead > tr > th:first-child{
border-right:2px solid #CC0018; /*Add this*/
}
<h2>First</h2>
<p>table without headers</p>
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd">1.1</td>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Second</h2>
<p>table with column header</p>
<table class="confluenceTable">
<thead>
<tr>
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Third</h2>
<p>table with row header</p>
<table class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh">1.1</th>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Fourth</h2>
<p>table with row and column header</p>
<table class="confluenceTable">
<thead>
<tr>
<!-- This element should also have a border right -->
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
Your problem, more generally
You have the following structure in your HTML.
element.A1
element.A2
element.B1
element.B2
Now, you want to style A2 depending on some properties B2 has. For example, if B2 is present, if B2 is a specific type of element (like a div or span), if it has a certain attribute ([data-foo="bar"]), et cetera.
Solving using CSS
Unfortunately, it is currently not possible to do this using a pure CSS solution. This is because all selectors in CSS go from an element to any descendant of that element, but never the other way around. For example, a b selects all elements of type b that are a descendant of a. With a > b, only children of a type elements are considered. There is however no way to go the other way.
Solving using JS + CSS
For now, you can solve your problem by using a certain class and applying that class using JavaScript. Something along the lines of the following.
.A1.special .A2 {
/* special styling on A2 */
}
var b2s = document.querySelectorAll('.B2'), i;
for (i = 0; i < b2s.length; ++i) {
if (isSpecial(b2s[i])) {
b2s[i].parentNode.previousSibling.classList.add('special');
}
}
References: querySelectorAll, parentNode, previousSibling, classList.
The isSpecial function would check for whatever properties you would want to check for. In particular, I implemented your specific question in the following snippet.
// detect special case and add class for CSS styling
var firstRows = document.querySelectorAll('.confluenceTable tbody > tr:first-child'), i;
for (i = 0; i < firstRows.length; ++i) {
if (firstRows[i].querySelector('th') !== null) {
firstRows[i].parentNode.parentNode.classList.add('special');
}
}
.confluenceTable {
border-collapse: collapse;
}
.confluenceTh, .confluenceTd {
padding: 6px 8px;
border: 1px solid #888a85;
border-right: none;
border-bottom: none;
}
table.confluenceTable tr:first-child .confluenceTh,
table.confluenceTable tr:first-child .confluenceTd {
border-top: none;
}
.confluenceTh:first-child, .confluenceTd:first-child {
border-left: none;
}
table.confluenceTable thead tr:first-child .confluenceTh {
border-bottom: 2px solid #CC0018;
}
table.confluenceTable tr .confluenceTh + :not(.confluenceTh) {
border-left: 2px solid #CC0018;
}
/* add styling for the exceptional case */
table.confluenceTable.special > thead > tr > th:first-child{
border-right:2px solid #CC0018;
}
<h2>First</h2>
<p>table without headers</p>
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd">1.1</td>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Second</h2>
<p>table with column header</p>
<table class="confluenceTable">
<thead>
<tr>
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Third</h2>
<p>table with row header</p>
<table class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh">1.1</th>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Fourth</h2>
<p>table with row and column header</p>
<table class="confluenceTable">
<thead>
<tr>
<!-- This element should also have a border right -->
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
Try this)
body > .confluenceTable:nth-child(12) thead tr:first-child th:first-child {
border-right: 2px solid #CC0018;
}
Live demo - https://jsfiddle.net/grinmax_/wxfL4ocg/
I have a table from n columns. Each cell has a class column-n.
I want to add on table class hide-column-n and hide all cells with class column-n.
Is this possible do it through css?
Example:
.table {
border: 1px solid black;
}
.table thead{
background-color: lightgray;
}
.table td{
border: 1px solid gray;
width: 50px;
}
<table class="table">
<thead>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
</thead>
<tbody>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
Here is example https://jsfiddle.net/xr21kwrh/
<table class="table">
<thead>
<tr>
<th class=column-1">One</th>
<th class"column-2">Two</th>
...
<th class="column-n">N</th>
</tr>
</thead>
<tbody>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
...
</tbody>
</table>
<style>
th:nth-child(2){display: none;}
td:nth-child(2){display: none;}
</style>
<table class="table">
<thead>
<tr>
<th class=column-1">One</th>
<th class"column-2">Two</th>
...
<th class="column-n">N</th>
</tr>
</thead>
<tbody>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
...
</tbody>
</table>
<style>
.column-n{ display-none !important; }
</style>
If you use sass/scss you can do so (in SCSS):
#for $i from 1 through 10 {
.hide-column-#{$i} .column-#{$i} {
display: none;
}
}
it will compile to:
.hide-column-1 .column-1 {
display: none;
}
.hide-column-2 .column-2 {
display: none;
}
....
.hide-column-n .column-n {
display: none;
}
then use it like expected:
<table class="table hide-column-1 hide-column-2">
codepen demo here
This is a table that I would like to achieve:
But I keep getting something like this:
This is what I've tried:
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
Here's a link to JSFiddle with this (with some extra code for illustration): http://jsfiddle.net/2292D/
You need only vertical-align:middle and text-align:center
Apply this css to div
div {
display:table-cell; // Change
vertical-align:middle; //Change
border: 1px solid blue;
}
td {
border: 1px solid red;
text-align:center; // Change
}
Fiddle Demo
Good old days using table, use rowspan and colspan to achieve that kind of tablular structure, if you are using this for layout than don't, use div instead with float and CSS Positioning.
Demo
<table border="1" width="100%">
<tr>
<td rowspan="2" width="30%">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2" width="70%">d</td>
<td>e</td>
</tr>
</table>
I guess you need 3 rows for that, try my code:
<table>
<tr>
<td rowspan="2"><div id="a">a</div></td>
<td colspan="2"><div id="b">b</div></td>
</tr>
<tr>
<td colspan="2"><div id="c">c</div></td>
</tr>
<tr>
<td colspan="2"><div id="d">d</div></td>
<td><div id="e">e</div></td>
</tr>
Here's my fiddle: http://jsfiddle.net/LLe5c/
apply your id on td
html:
<table>
<tr>
<td id="a" rowspan="2"><div>a</div></td>
<td id="b" colspan="2"><div >b</div></td>
</tr>
<tr>
<td id="c" colspan="2"><div >c</div></td>
</tr>
<tr>
<td id="d" colspan="2"><div >d</div></td>
<td id="e"><div >e</div></td>
</tr>
</table>
Here is the Solution
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
border: 1px solid red;
}
</style>
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>