Say I have a simple table like this:
<table>
<tr>
<td>
cell
</td>
<td>
cell
</td>
</tr>
<tr>
<td>
cell
</td>
<td>
cell
</td>
</tr>
</table>
Then, I add borders between the columns with this css:
td:not(:last-child){
border-right:1px solid black;
}
But then I get spaces on the border between each row D:
I want it to look like this:
How can I get rid of these spaces?
http://jsfiddle.net/Tgr48/
Collapsing the table border will do that:
table {border-collapse:collapse;}
Related
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>
I have a table that is generated by PHP. I wanted to style the table a bit, so there is a border-bottom on every row.
I used border-collapse: collapse; so I don't have to apply the border to the td. I have reproduced my problem here:
http://codepen.io/anon/pen/zvpKBE
I would like to have every horizontal border as long as the row is. When I inspect my row, it's long enough, but the border is only applied to the td's in it.
Your (td)header columns and data columns should be equal to have the border fully. Like below
<table>
<tbody><tr>
<td>This is an test</td>
<td>Second field</td>
<td>Third field</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
I have html tables inside a huge table that I'm trying to get to to lay their cells horizontally dynamically generated by php. Right now my structure looks like this:
<table>
<tr>
<td>
<table>
<tr>
<td>
1
</td>
</tr>
</table>
<table>
<tr>
<td>
2
</td>
</tr>
</table>
</td>
</tr>
</table>
and the html my chrome browser is rendering outputs the cells like this:
1
2
instead of:
1 2
I know I can just as easily do this:
<table>
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
</table>
and have my desired output of:
1 2
but I have some info that won't fit clean in a td cell in a table. Any help?
If you use "float: left" and put some text after the table, it positions next to the table, not in the bottom.
Use
td table {
float: left;
/*or:
display: inline-block;*/
}
Use float:left for table CSS
table{
float:left;
}
Fiddle here
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>
I am using Bootstrap.
I have a table, where some rows needs to be grouped with the rows below them.
That means there should be no border between them.
I am wondering if there is an inherent bootstrap way of doing this, or do I need to
put on each tr style="..no border.."
All I care is for the solution to work on Chrome (and nice to have on FF).
<table>
<tr>
<td>
<label>Stuff</label>
</td>
<td>
<label>sdrfg</label>
</td>
</tr>
<tr class="group">
<td>
<label>Other stuff</label>
</td>
<td>
<label>asdfgh</label>
</td>
</tr>
<tr>
<td>
<label>Other stuff</label>
</td>
<td>
<label>asdfgh</label>
</td>
</tr>
</table>
CSS:
table{
width:100%;
border-collapse:collapse;
}
table td{
border-top:1px solid #000000;
}
table tr.group>td{
border-top:none;
}