I have a for loop that should populate a table as in following diagram:
Age is is in the first row which is a table header, then there are three rows and each has three columns. First row contains images, second is simply a horizontal line (must not be a row, could be bottom border of previous row), and the third is numeric scale i.e. 18-29, 30-50, 50+.
My HTML:
<table >
<tr>
<td>Age</td>
</tr>
<tr *ngFor="let age of age_range">
<td>{{age}}</td>
</tr>
</table>
and css:
table , tr {
border-bottom: 1px solid;
}
How can I apply css to it to look like in the diagram? Right now I get like following:
it should work like this
<table >
<tr>
<td colspan="3">Age</td>
</tr>
<tr>
<td *ngFor="let age of age_range">{{age}}</td>
</tr>
If you don't know the the exact columns number you can use age_range.length, in Angularjs it's done like this colspan="{{age_range.length}}" ,it's probably the same in Angular 2.
.border-bottom {border-bottom: 1px #ccc solid;}
table {width: 100%;}
<table>
<tr>
<td colspan="3">Age</td>
</tr>
<tr>
<td class="border-bottom">11111</td>
<td class="border-bottom">22222</td>
<td class="border-bottom">33333</td>
</tr>
</table>
Related
I'm trying to multiplication table in html, but it requires only a border below the top row and to the right of the left row. Everything within the table will not be separated by borders. However, I feel stumped because I think you cannot do this, is it even possible to only add a border to one cell?
edit: dear freinds i have discovered an image from the internet that demonstrates what I am trying to achieve. http://i.stack.imgur.com/y364h.jpg For my table, is it possible to only have borders corresponding to the bold border from the image within my html table?
You need to work with CSS. Here is a sample I am providing
<html>
<head>
<title>Border-Test</title>
<style>
.border-side {
border-right: 1px solid black;
}
.border-bottom td {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<table cellpadding="2" cellspacing="0">
<thead>
<tr><td colspan="5">Addition</td></tr>
</thead>
<tbody>
<tr class="border-bottom">
<td class="border-side"> </td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">0</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">1</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">2</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">3</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
Here is the output of above
NOTE : You need to change the table cell data which I haven't changed.
NOTE : You also must need to specify the cellspacing="0".
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 have a table as follows
<table border="1">
<tr>
<td style="display:table-row">
Apple
</td>
<td style="display:table-row">
Banana
</td>
<td style="display:table-row">
Candle
</td>
<td style="display:table-row">
Digital drive
</td>
</tr>
</table>
Output is as follows
I want to change the output to show only the first two columns in the first row and then the last two columns in the second row without changing the structure of the table html but only changing the display property . Is there any css which lets me achive this ?
Try this:
table td {
border: none;
}
table td:nth-child(-n+1),td:nth-last-child(-n+2) {
float: left;
}
JSFiddle link
It will only make first two column and last two column in single row.
You can use css:
display: none;
Initially i would suggest don't change td default behaviour we have specification for each tag follow it. and you can achieve that display using visibility:hidden; or display:none; to the table-row
<table border="1">
<tr>
<td>
Apple
</td>
</tr>
<tr>
<td>
Banana
</td>
</tr>
<tr>
<td>
Candle
</td>
</tr>
<tr>
<td>
Digital drive
</td>
</tr>
</table>
My example code:
<!DOCTYPE html>
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>
</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>
<table border="1">
<tr>
<td>
test
</td>
<td>
<table border="1">
<tr>
<td>
test
</td>
<td>
wuut
</td>
</tr>
<tr>
<td>
test1
</td>
<td>
wuut1
</td>
</tr>
<tr>
<td>
test2
</td>
<td>
wuut2
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<style>
table {
border-collapse: collapse;
}
</style>
You can just paste it here and see what it looks like : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables
What I need is that when tables are inside each other, tables have like joined borders. Only tables that data are separated.
At the moment the right bottom corner of table has like 3 layers of border, but that just looks ugly.
I tried using CSS:
border-collapse: collapse;
But this just removed cellspacing for borders :/
It should look like this, but this is with colspan/rowspan, which is too messy:
<!DOCTYPE html>
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td colspan="3"> </td>
</tr>
<tr>
<td rowspan="3">400</td>
<td rowspan="3">500</td>
<td rowspan="3">test</td>
<td>test</td>
<td>wuut</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td>wuut1</td>
<td>wuut2</td>
</tr>
</table>
</body>
</html>
Modify the program code that generates the markup so that there are no border=1 attributes and there are class attributes for td elements, controlling borders around each cell. The class attribute would corresponds to CSS settings that set a border on selected sides of a cell, e.g. <td class="left top"> with CSS code:
.left { border-left-style: solid }
.top { border-top-style: solid }
The width and color of borders you can set in one rule, like:
td { border-width: 1px; border-color: #333; }
You should still set table { border-collapse: collapse } and probably set padding: 0 on each cell that contains a table.
It’s a bit tricky, because the borders of nested tables are drawn separately. But you can tune things with some CSS3 so that they work in the desired way on modern browsers. (If you wish to achieve the effect on ancient browsers, too, you would need to scatter around a lot of class attributes.)
You need to remove the default cell spacing from (at least) cells containing tables. (The spacing between borders of inner and outer table come from the cells spacing.) This requires that each td that contains a table has a suitable class attribute, say class=containsTable, because in CSS you cannot refer to an element by its descendants (contents). Moreover, you need to selectively switch off top borders from the cells of the first row of any nested table, etc.:
.tableContainer { padding: 0; }
table table { border: none }
table table tr:first-child td { border-top: none; }
table table tr:last-child td { border-bottom: none; }
table table td:first-child { border-left: none; }
table table td:last-child { border-right: none; }
Try <table style="border:0;"> wont show borders if that's what your looking for and you can also be specific about which side you want to display like for example:
<table style="border-left:1px solid black;">
You can enter to the style border-(left,right,bottom,top):"pixels" "Type of border" "color".
<td style="border:0px;">
test
</td>
<td style="border:0px;">
wuut
</td>
</tr>
it wont show them. Or give them an ID and use <style type="text/css">
<style type="text/css">
#aa {border:0px;}
</style>
...
<td ID="aa">
...
if you can add ID="aa" to that loop then it should work.
Here's my current fiddle:
http://jsfiddle.net/UjAQf/106/
For the Sport, Status, and Result headings and columns, I want to align center.
For the Pick, Genius, and Genius Credential heading and columns, I want to align left.
For the "picksHeading," I want to align left.
What's the most-efficient way to do this?
--
Code:
<div class="geniusPicks">
<table cellpadding="1" cellspacing="0">
<thead>
<tr id="picksHeading">
<th>Sport</th>
<th>Status</th>
<th colspan="2">Pick</th>
<th>Genius</th>
<th>Genius Credential</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr class="bigGap">
<td colspan="7"></td>
</tr>
<tr class="pickHeading">
<td colspan="7">blah</td>
</tr>
<tr class="pickBody">
<td rowspan="4">plah</td>
<td rowspan="4">flah</td>
<td rowspan="4">glah</td>
<td>vlah</td>
<td>mlah</td>
<td>nlah</td>
<td rowspan="4">jlah</td>
</tr>
<tr class="pickBody">
<td>clah</td>
<td>dlah</td>
<td>xlah</td>
</tr>
<tr class="pickBody">
<td>plah</td>
<td>slah</td>
<td>klah</td>
</tr>
<tr class="pickBody">
<td>qlah</td>
<td>wlah</td>
<td>zlah</td>
</tr>
<tr class="smallGap">
<td colspan="7"></td>
</tr>
<tr class="pickHeading">
<td colspan="7">blah</td>
</tr>
<tr class="pickBody">
<td rowspan="4">plah</td>
<td rowspan="4">flah</td>
<td rowspan="4">glah</td>
<td>vlah</td>
<td>mlah</td>
<td>nlah</td>
<td rowspan="4">jlah</td>
</tr>
<tr class="pickBody">
<td>clah</td>
<td>dlah</td>
<td>xlah</td>
</tr>
<tr class="pickBody">
<td>plah</td>
<td>slah</td>
<td>klah</td>
</tr>
<tr class="pickBody">
<td>qlah</td>
<td>wlah</td>
<td>zlah</td>
</tr>
<tr class="smallGap">
<td colspan="7"></td>
</tr>
</tbody>
</table>
</div>
CSS:
.geniusPicks {}
.geniusPicks table {width:100%; font-size:12px;}
.geniusPicks table tr#picksHeading {border:1px solid; background-color:red; height:30px;}
.geniusPicks table tr.pickHeading {border:1px solid;}
.geniusPicks table tr.pickBody td {border:1px solid;}
.bigGap td {height:19px;}
.smallGap td {height:10px;}
you can either add classes to the cells you'd like centered or this might work for you,
Working Example
CSS added:
.geniusPicks table th,
.geniusPicks table th+th+th+th+th+th,
.geniusPicks table .pickHeading+tr td,
.geniusPicks table .pickHeading+tr td+td+td+td+td+td+td {
text-align: center;
}
.geniusPicks table th+th+th,
.geniusPicks table .pickHeading+tr td+td+td {
text-align: left;
}
This CSS makes use of the Adjacent Sibling Selector in two places
.pickHeading+tr - this only targets the cells which come in the row tr which is an immediate sibling of the pickHeading row - which is your 7 celled row, this means the smaller rows the ones with only 3 celss never get targeted and are left to default to the left
td - targets every cell
td+td+td+td+td+td+td - targets every cell which has 6 others preceding it (7)
td+td+td - targets every cell which has 2 others preceding it (3,4,5,6,7)
so the last example in #2 above overrules for cells 3 4 5 & 6, but not 7 as the 2nd example above is more specific
It could probably be done with :nth-child to but this way is supported by IE7, and needs one less rule!