I'm using Bootstrap 3 and I want to remove border of cell:
<td colspan="4"></td>
This is the current table:
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>N°</th>
<th>Fecha salida</th>
<th>Fecha regreso</th>
<th>Ciudad</th>
<th>País</th>
<th>Días</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>1</td>
<td>03/02/2015</td>
<td>05/02/2015</td>
<td>Ciudad de Panamá</td>
<td>Panamá</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>05/12/2014</td>
<td>05/12/2014</td>
<td>New York</td>
<td>EE.UU</td>
<td>1</td>
</tr>
<tr class="bold">
<td colspan="4"></td>
<td align="right">Días fuera</td>
<td>4</td>
</tr>
</tbody>
</table>
Current View:
Desired View:
One way to do it is to set the border-bottom css property to hidden for <td colspan="4"></td>.
<td colspan="4" style="border-bottom: hidden;"></td>.
...or include the css in your 'bootstrap overriding stylesheet' (if you have one).
Fiddle
Use this CSS
#hiddenborder{
border-bottom: hidden;
border-left: hidden;
}
Related
I am trying to create a table using HTML like this:
I wrote something like this:
<table>
<caption>Bill Summary</caption>
<tr>
<th rowspan="2">Months</th>
<th colspan="3">Bills</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<td>Electricity</td>
<td>Water</td>
<td>Gas</td>
<td align="center">9925</td>
</tr>
<tr>
<td>January</td>
<td>1000</td>
<td>1000</td>
<td>975</td>
</tr>
<tr>
<td>February</td>
<td>1200</td>
<td>1200</td>
<td>975</td>
</tr>
<tr>
<td>March</td>
<td>1500</td>
<td>1100</td>
<td>975</td>
</tr>
</table>
But it gives out put like this:
I need to have that one total amount aligned in the center and a border like the first table image
Thanks in Advance.
I guess you could use the rowspan attribute here as well.
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<body>
<table>
<caption>Bill Summary</caption>
<tr>
<th rowspan="2">Months</th>
<th colspan="3">Bills</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Electricity</th>
<th>Water</th>
<th>Gas</th>
</tr>
<tr>
<td>January</td>
<td>1000</td>
<td>1000</td>
<td>975</td>
<td rowspan="3">9925</td>
</tr>
<tr>
<td>February</td>
<td>1200</td>
<td>1200</td>
<td>975</td>
</tr>
<tr>
<td>March</td>
<td>1500</td>
<td>1100</td>
<td>975</td>
</tr>
</table>
</body>
</html>
move total value to third row and modify like this
<td align="center" style="vertical-align: middle" rowspan="3" >9925</td>
I have the following table:
Comm Layer
Implemented By
Application
Application
Transport
OS
Internet
OS
Link
OS
Link
Hardware
<table>
<thead>
<tr>
<th>Comm Layer</th>
<th>Implemented By</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td>OS</td>
</tr>
<tr>
<td>Internet</td>
<td>OS</td>
</tr>
<tr>
<td>Link</td>
<td>OS</td>
</tr>
<tr>
<td>Link</td>
<td>Hardware</td>
</tr>
</tbody>
</table>
I would like to merge the two cells that say "Link" and the three cells that say "OS". I tried using the rowspan attribute in several ways but to no avail. I was able to merge either the two "Link" cells or the three "OS" cells, but not both.
In short: you cannot have a <tr> where all cells participate in a rowspan="" because that creates a zero-height row (as there's no row-specific content). I feel this is a design flaw in HTML.
One workaround is to have a zero-width column that always has non-rowspan="" cells (which are propped up with , but hidden (using visibility: hidden;, not display: none;):
(My posted code comments out the removed cells with <!--<td>OS</td>--> for illustrative purposes, obviously you can remove those in your final version)
table {
border: 1px solid #999;
border-collapse: collapse;
}
th, td {
border: 1px solid #999;
}
tr > *:nth-child(1) { visibility: hidden; }
<table>
<thead>
<tr>
<th> </th>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td> </td>
<td>Transport</td>
<td rowspan="3">OS</td>
</tr>
<tr>
<td> </td>
<td>Internet</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td> </td>
<td rowspan="2">Link</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td> </td>
<!--<td>Link</td>-->
<td>Hardware</td>
</tr>
</tbody>
</table>
There's probably improvements using more modern CSS techniques to enforce a minimum row height though - I've been using the technique since before I stopped using Dreamweaver in 2004.
<!-- Try this one -->
<table align="center" cellspacing="0" cellspadding=="0">
<thead>
<tr>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td rowspan="2">OS</td>
</tr>
<tr>
<td>Internet</td>
</tr>
<tr>
<td rowspan="2">Link</td>
<td>OS</td>
</tr>
<tr>
<td>Hardware</td>
</tr>
</tbody>
</table>
I am trying to add a row with double height to that of other row. But unable to make. Not sure what is wrong.
<table border="1">
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
You'll need some css to set the height of the row;
table td, tr {
height: 30px;
}
table td, tr {
height: 30px;
}
<table border="1">
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</tbody>
</table>
Note; You should add a tbody to your table; What is the purpose for HTML's tbody?
Are you trying to do that ?
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td rowspan="2">A4/B4 <br>(2 rows)</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td colspan="2">C2/C3 <br>(2 cols)</td>
<td>C4</td>
</tr>
</table>
The rowspan property should only be used if you are trying to have one cell appear across two rows (as if you are using the Merge Cells functionality on Excel). If you want to make one row twice as high as the other, this is a display property and should be done with css or inline styling. The middle (row) should also be removed.
If this is just a general example and you need to use it on something more complex. If you use rowspan on say 1 element, you will need to make sure that the following row has 1 less td element otherwise it will not display correctly.
<table border="1">
<tr style="height: 50px">
<td >A1</td>
<td >A2</td>
<td >A3</td>
<td >A4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
How can I do to change the style of the first row of a group of rows (identified by a td with a sub-item class) that is near to a sibling row (identified by a td with the item class):
HTML:
<table>
<thead>
</thead>
<tbody>
<tr>
<td class="item"></td>
</tr>
<tr>
<td class="sub-item"><!-- I need to style this one --></td>
</tr>
<tr>
<td class="sub-item"></td>
</tr>
<tr>
<td class="sub-item"></td>
</tr>
<tr>
<td class="item"></td>
</tr>
<tr>
<td class="sub-item"><!-- I need to style this one --></td>
</tr>
</tbody>
</table>
I'd like to style with an inset box-shadow all the first rows matched by this criteria.
I tried with the sibling operator without success:
CSS:
tr > td.item ~ tr > td.sub-item:first {}
With the current code you would have to use :nth-[last]-child()
tr:first-child + tr .sub-item, tr:nth-last-child(2) + tr .sub-item {
background-color: red
}
<table>
<thead>
</thead>
<tbody>
<tr>
<td class="item">1</td>
</tr>
<tr>
<td class="sub-item">2<!-- I need to style this one --></td>
</tr>
<tr>
<td class="sub-item">3</td>
</tr>
<tr>
<td class="sub-item">4</td>
</tr>
<tr>
<td class="item">5</td>
</tr>
<tr>
<td class="sub-item">6<!-- I need to style this one --></td>
</tr>
</tbody>
</table>
Also, you can add a class to tr and achieve what you want.
.row + tr .sub-item {
background-color: red
}
<table>
<thead>
</thead>
<tbody>
<tr class="row">
<td class="item">1</td>
</tr>
<tr>
<td class="sub-item">2<!-- I need to style this one --></td>
</tr>
<tr>
<td class="sub-item">3</td>
</tr>
<tr>
<td class="sub-item">4</td>
</tr>
<tr class="row">
<td class="item">5</td>
</tr>
<tr>
<td class="sub-item">6<!-- I need to style this one --></td>
</tr>
</tbody>
</table>
table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
I have a nested table as follows -
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
Requirement - Only TEXTA and TEXTB should be colored in red. In real scenario there are many rows. I want only the first td of each row in the parent table to be colored. I am doing something like -
table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
This is not giving me any result. What is the correct way of achieving this?
Spent a while playing around with this. The best I can do is to suggest using 2 lines of CSS rather than 1. One selector to do all of the first row of td and one to set the nested ones back to how they belong.
table.parent tr:first-child td {
color: red;
}
table.nested tr:first-child td {
color: black;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
You said that..
I want only the first td of each row in the parent table to be colored
So, I am assuming you want TEXTA and TEXTC to be colored (and not TEXTB as you stated).
If thats the case, then your idea was to select elements (first td of each row) if they dont contain a specific child element (table.nested).
This is not possible with CSS2 or CSS3.
The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.
See CSS selector - element with a given child
Edit
You can use jquery/javascript to do so.
For example, to add opacity and color css properties:
$(document).ready(function(){
$('table.parent > tbody > tr > td:first-child').each(function(){
if ($(this).has('table.nested').length == 0){
$(this).css('opacity', '0.5');
$(this).css('color', 'red');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
Just give some class to TEXTA & TEXTB
for example:
(html)
<td class="red-color-text">TEXTA</td>
<td class="red-color-text">TEXTB</td>
(css)
.red-color-text{color: red;}