Avoid Table row break in html
enter image description here
As shown in above image the table td is breaking.
Is it possible to avoid the page break?
#media print {
body { margin : 0px 15px !important }
#page {page-break-before: always; page-break-after: always;}
.keyterms{page-break-before: always;}
.printBtn{ display: none;}
table { page-break-inside:auto; }
tr { page-break-inside:auto; }
}
<div class="row pt-4 pb-4">
<table class="table table-bordered">
<tbody>
<tr>
<td>Date</td>
<td>Start Time</td>
<td>End Time</td>
<td>Time Zone</td>
<td>Type</td>
<td>Description</td>
</tr>
<tr>
<td>12/12/2022</td>
<td>12:00 pm</td>
<td>13:00 pm</td>
<td>USA</td>
<td>XYZ</td>
<td>na</td>
</tr>
</tbody>
</table>
</div>
Related
I have built an HTML table which intermediate rows are hidden with CSS using visibility:collapse
Only the first and last rows of the table are visible by default.
In this table, there is a column on the right that was set using rowspan. This column can contain multiple lines of text.
My problem is that the whole content put in this column seems to be truncated if its height is bigger than the combined height of the table rows that are displayed by default (the first one and the last one).
.hide {
visibility: collapse
}
body {
padding: 2rem;
}
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
What should I change in the CSS to get all the lines of "Text" of the rowspan cell displayed instead of being truncated? JavaScript cannot be used.
I think it's better to use display:none; or visibility:hidden;.
Or use overflow:auto; on TD, but then you will get a scrollbar jsfiddle
About visibility:collapse; check out this post from css-tricks
.hide{
/* Using this, will mess up everything */
/* visibility:collapse; */
/* Using this, will give you something where the middle row is hidden */
/* visibility:hidden; */
/* display none works the best */
display: none;
}
<table border="1">
<tbody>
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</tbody>
</table>
Digging into this problem it became clear that the problem description and the way the <td rowspan="3"> is constructed in the example puts everyone off track. Including me...
The answer, after some utter frustrating hours, is actually quite simple:
the OP is trying to force 6 rows of text into a 3 rows space because of the 5 <br>s. There is just not room enough for the content, so the cell overflows. The rowspan should not read 3, but 6!
Once the room issue has been revealed, one solution is to create more table rows to accommodate for the 6 rows and make arrangements for using a scrollbar, while clipping the overflowing cell when there are less than 6 rows available in the table.
On page table: The Table element: Displaying large tables in small spaces MDN defines a table as table { display: block; overflow: auto } and introduces tbody { white-space: nowrap } to enable scrolling of table content.
I created some commented code showing the original and solution 1 with simple toggles for class .hide and additional rows.
Do I like it? No, far from, but this is how the table mechanism appears to work. I don't think it is a bug, just something we need to work around...
UPDATE
In reply to #MaxiGui's fair point below, me not honoring the OPs "What should I change in the CSS to get all the lines of "Text" of the rowspan cell displayed instead of being truncated" question, I added another solution.
Added solution 2 shows the OP original code, but simply toggles class .hide between display: none/table-row instead of visibility: collapse/visible.
Because if all size properties of an element have to be set to 0 (zero, nullified) to mimick display: none, it is far less complicated to use the display property instead of visibility to hide a table row.
FYI, the OP did not explicitely mention the requirement to retain visibility...
/* original code */
body { padding: 2rem }
.hide { visibility: collapse }
/* solution 1 */
.solution {
display: inline-block;
overflow: auto; /* to show scrollbars when required */
}
/*
MDN excerpt
(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#displaying_large_tables_in_small_spaces)
When looking at these styles you'll notice that table's display property
has been set to block. While this allows scrolling, the table loses some
of its integrity, and table cells try to become as small as possible.
To mitigate this issue white-space has been set to nowrap on the <tbody>.
*/
.solution tbody { white-space: nowrap }
.solution td {
overflow: hidden; /* clips excess content */
vertical-align: top; /* moves content to top of cell */
}
#tgl-line ~ .solution {
min-width: calc(6.75rem + 17px); /* create some room for content and scrollbar */
/* just for demo, change to max-width when .solution { display: block } */
}
#tgl-line:checked ~ table .hide { visibility: visible } /* both tables */
#tgl-line:checked ~ .solution { min-width: 6.75rem } /* solution only */
#tgl-rows ~ .solution .rows { display: none } /* additional rows hidden */
#tgl-rows:checked ~ .solution .rows { display: table-row } /* in view... */
/* solution 2 */
.hide-d { display: none } /* alt classname for solution 2 */
#tgl-line:checked ~ table .hide-d { display: table-row }
/* eye-candy */
h2 { margin-top: 4rem }
<input id ="tgl-line" type="checkbox">
<label for="tgl-line">toggle .hide (all examples)</label>
<h2>original: toggle 'visibility' (rowspan=3)</h2>
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
<h2>solution 1: toggle 'visibility' (rowspan=6)</h2>
<input id ="tgl-rows" type="checkbox">
<label for="tgl-rows">toggle rows</label>
<br><br>
<table class="solution" border="1">
<tbody>
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="6" class="special">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
<tr class="rows">
<td>D1</td>
<td>D2</td>
</tr>
<tr class="rows">
<td>E1</td>
<td>E2</td>
</tr>
<tr class="rows">
<td>F1</td>
<td>F2</td>
</tr>
</tbody>
</table>
<h2>solution 2: toggle 'display' (rowspan=3)</h2>
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide-d">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
.
.hide {
position: absolute;
left: -999em;
}
body {
padding: 2rem;
}
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
display: none;
Element is removed from the normal flow and hidden; the space it occupied is collapsed.
Content is ignored by screen readers.
So, if you want to hide it but make it visible for screen readers you can use the above code in my opinion.
If you really need, you can always add line-height: 0; to .hide as below:
.hide {
visibility: collapse;
line-height: 0;
}
This solution has been given here: CSS: "visibility: collapse" still takes up space
I would still recommend to apply the visibility:collapse on the td as it would let more space to the rowspan cell as you can see the diff between the 2 tables.
I still prefer the use of display:none; but it would depend what you are trying to do.
DEMO
#hide .hide {
visibility: collapse;
line-height: 0;
}
body {
padding: 2rem;
}
/* SECOND table - collapse on td */
#td-hide .hide > td{
visibility: collapse;
line-height: 0;
height:0;
border: 0;
padding:0;
margin:0;
}
.container{
display:flex;
}
.container > div{
margin:0 auto;
}
<div class="container">
<div>
<h3>visibility: collapse on tr</h3>
<table id="hide" border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
</div>
<!-- Second table with collapse on td -->
<div>
<h3>visibility: collapse on td</h3>
<table id="td-hide" border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
</div>
</div>
You can use position: absolute and top: -1000000px By using this code you can achieve your required output.
.hide {
position: absolute;
top: -100000px;
}
body {
padding: 2rem;
}
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6<br>Text 7<br>Text 8<br>Text 9</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
I hope this will resolve your issue.
Hello if you need display your content properly, you should to add a class and make this class width: auto; overflow: auto; height: auto; I recommend to you apply this ->
.hide {
visibility: collapse
}
body {
padding: 2rem;
}
.meta {
width: auto;
overflow: auto;
height: auto;
}
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td class="meta" rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
but it would depend what you are trying to do.
You can scroll your table data, Look at the following code:
.hide {
visibility: collapse
}
body {
padding: 2rem;
}
.table-data {
overflow-y: auto;
}
.table-data::-webkit-scrollbar {
display: none;
}
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3" class="table-data">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
I have table in the a page where I need to implement a vertical scroll only for the tbody part of the table. My table has columns of dynamic width, there's horizontal scrolling implemented if increase in width of a column causes the table to overflow. What I want is for only the body of the table to scroll on vertical overflow, but want the table header to remain visible. What I have implemented scrolls the entire table vertically
Following is my code for now. It has dummy data, as I cant post the actual code, but the structure is the same(jsfiddle link):
th,
td {
text-align: left;
padding: 5px;
outline: solid 0.5px;
}
table {
table-layout: auto;
width: 100%;
white-space: nowrap;
overflow-x: scroll;
overflow-y: scroll;
height: 100px;
display: block;
}
.container {
width: 300px;
}
<div class="container">
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Name</th>
<th>Address</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Title 2</td>
<td>Jane Doe</td>
<td>dfss</td>
<td>sdffsffsfd</td>
<td>sfsfs</td>
<td>sfsff</td>
</tr>
<tr>
<td>Title 3</td>
<td>John Doe</td>
<td>sasas</td>
<td>eeeee</td>
<td>eEe</td>
<td>sfff</td>
</tr>
<tr>
<td>Title 4 is a long title</td>
<td>Name1</td>
<td>dfss</td>
<td>sdffsffsfd</td>
<td>sfsfs</td>
<td>sfsff</td>
</tr>
<tr>
<td>Title 5 is shorter</td>
<td>Name 2</td>
<td>dfsf</td>
<td>sdfsf</td>
<td>dfsf</td>
<td>sdfsf</td>
</tr>
<tr>
<td>Title 6</td>
<td>Name 3</td>
<td>sasas</td>
<td>eeeee</td>
<td>eEe</td>
<td>sfff</td>
</tr>
</tbody>
</table>
</div>
I have checked multitiple solutions on stackoverflow for this problem but they all set a fixed width for their columns and then use wrap the content inside if it exceeds the width. table with fixed thead and scrollable tbody
is the only solution that didn't completely mess up my page, but doesn't work, it gives different column widths for columns in header and body.
All other solutions, even the ones that use nested table use fixed width column, and the ones which don't use js/jQuery which I would rather not use unless its the absolute, last ever option. Can anyone please suggest something?
To make the <tbody> scrollable :
tbody{
display: block;
height: 100px;
width: 100%;
overflow-y: scroll;
}
And if you want to the <thead> to stay fixed while the body scrolls:
thead tr{
display: block
}
I'm unsure whether this is answering your question.
If the y axis is always to have a scroll and the x axis only to have
a scroll if there is too much information
CSS
overflow-x:auto;
overflow-y:scroll;
I came across this issue myself and found an alternate solution to the answer posted by #Abe Caymo
Simple non-ideal solution (by Abe)
The problem with Abe's solution is that it works fine up until you start to use thead and tfoot. Once you add these you will soon realize that the table column layout no longer syncs the column width across tbody, thead and tfoot. See demo below...
th,
td {
text-align: left;
padding: 5px;
outline: solid 0.5px;
}
table {
white-space: nowrap;
display: block;
}
tbody{
display: block;
height: 100px;
overflow-y: auto;
}
<div class="container">
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Name</th>
<th>Address</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Title 2</td>
<td>Jane Doe</td>
<td>dfss</td>
<td>sdffsffsfd</td>
<td>sfsfs</td>
<td>sfsff</td>
</tr>
<tr>
<td>Title 3</td>
<td>John Doe</td>
<td>sasas</td>
<td>eeeee</td>
<td>eEe</td>
<td>sfff</td>
</tr>
<tr>
<td>Title 4 is a long title</td>
<td>Name1</td>
<td>dfss</td>
<td>sdffsffsfd</td>
<td>sfsfs</td>
<td>sfsff</td>
</tr>
<tr>
<td>Title 5 is shorter</td>
<td>Name 2</td>
<td>dfsf</td>
<td>sdfsf</td>
<td>dfsf</td>
<td>sdfsf</td>
</tr>
<tr>
<td>Title 6</td>
<td>Name 3</td>
<td>sasas</td>
<td>eeeee</td>
<td>eEe</td>
<td>sfff</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Title 1</th>
<th>Name</th>
<th>Address</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</tr>
</tfoot>
</table>
</div>
Slightly more ideal solution
A better solution which maintains the auto table-layout is to set the thead and tfoot to position: sticky.
A few caveats and things to understand about this approach.
The overflow or element actually scrolling, is the div container of the table. You must have this and this is what you may use to control the size of the table. As such, the scroll bar will always be the full height of the scrollable table.
The background-color must be set to an opaque value otherwise the rows in the tbody will show behind the header as it passes below when scrolling.
The borders/outlines are much harder to get right but with a little finessing you can find a compatible style. Adding a border or outline to either thead or tfoot will not be sticky.
.container {
height: 140px;
min-height: 100px;
overflow: auto;
resize: vertical; /* only for demo */
}
thead,
tfoot {
/* must background-color otherwise transparent will show rows underneath */
background-color: white;
position: sticky;
}
thead {
margin-bottom: 0;
top: 0;
}
tfoot {
margin-top: 0;
bottom: 0;
}
th,
td {
text-align: left;
padding: 5px;
outline: solid black 0.5px;
}
table {
width: 100%;
}
<div class="container">
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Name</th>
<th>Address</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Title 2</td>
<td>Jane Doe</td>
<td>dfss</td>
<td>sdffsffsfd</td>
<td>sfsfs</td>
<td>sfsff</td>
</tr>
<tr>
<td>Title 3</td>
<td>John Doe</td>
<td>sasas</td>
<td>eeeee</td>
<td>eEe</td>
<td>sfff</td>
</tr>
<tr>
<td>Title 4 is a long title</td>
<td>Name1</td>
<td>dfss</td>
<td>sdffsffsfd</td>
<td>sfsfs</td>
<td>sfsff</td>
</tr>
<tr>
<td>Title 5 is shorter</td>
<td>Name 2</td>
<td>dfsf</td>
<td>sdfsf</td>
<td>dfsf</td>
<td>sdfsf</td>
</tr>
<tr>
<td>Title 6</td>
<td>Name 3</td>
<td>sasas</td>
<td>eeeee</td>
<td>eEe</td>
<td>sfff</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Title 1</th>
<th>Name</th>
<th>Address</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</tr>
</tfoot>
</table>
</div>
The final result will look something like that below with all columns aligned respectively...
Also see this solution using display: grid on the table element.
i want to print html page with modern browser and add header on every page on printing. Techniques found on the internet but does not work in modern browsers.
Is there a way to do this?
i add example that not work me in modern browser.
$(document).ready(function(){
var head = $('table thead tr');
$( "tbody tr:nth-child(10n+10)" ).after(head.clone());
});
table{
border:none;
}
tr{
display:block;
}
td, th{
width: 100px;
}
tbody tr.head {
page-break-before: always;
page-break-inside: avoid;
}
#media screen {
tbody .head{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr class="head">
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr class="start">
<td>January</td>
<td>2010</td>
</tr>
<tr>
<td>February</td>
<td>2010</td>
</tr>
<tr>
<td>March</td>
<td>2010</td>
</tr>
<tr>
<td>April</td>
<td>2010</td>
</tr>
<tr>
<td>May</td>
<td>2010</td>
</tr>
<tr>
<td>June</td>
<td>2010</td>
</tr>
<tr>
<td>July</td>
<td>2010</td>
</tr>
<tr>
<td>August</td>
<td>2010</td>
</tr>
<tr>
<td>September</td>
<td>2010</td>
</tr>
<tr>
<td>October</td>
<td>2010</td>
</tr>
<tr>
<td>November</td>
<td>2010</td>
</tr>
<tr class="end">
<td>December</td>
<td>2010</td>
</tr>
</tbody>
</table>
</body>
Try this sample
Use media query for custom style for screen and print
CSS
#media screen {
.page-header { display: none; }
.page-footer { display: none; }
}
HTML code
<body>
<p class="page-header">Page header goes here</p>
your Webpage main content goes here
<p class="page-footer">Page footer goes here</p>
</body>
I've a table with caption centered middle. At the right side of the caption, there is a link with refers to another page for detailed view. If my link text is too large, then the caption middle alignment is broken, it is pushed left. All I want to keep the caption at the middle regardless of the placement of link. That means, caption should be middle aligned.
Problem Demo
<div class="col-xs-4">
<table class="table">
<caption>Table Caption<a class="detail-link">large link placed at right</a></caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</div>
/* CSS used here will be applied after bootstrap.css */
.detail-link {
float: right;
}
It can be done using a div tag combined with some relative positioning as seen below.
<div class="col-xs-4">
<table class="table">
<caption>Table Caption</caption>
<div style="position:relative;float:right;top:20px;">text too long</div>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</div>
Positioning it as absolute will achieve your requirement.
.detail-link {
position:absolute;
right: 0;
width: 30%;
}
You could try this:
CSS:
.detail-link {
float:right;
width:30%;
}
span{
position:relative;
left:26px;
}
HTML:
<div class="col-xs-4">
<table class="table">
<caption><span>Table Caption</span><a class="detail-link">large links asfasf asf asdf as at right</a></caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</div>
span{position:relative;
left:26px;
}
you could do:
Table Caption also should float:right; and replace to after your link
CSS:
/* CSS used here will be applied after bootstrap.css */
.detail-link {
float: right;
}
span {
float:right;
margin-right:15px;
}
HTML:
<div class="col-xs-4">
<table class="table">
<caption><a class="detail-link">large link placed at right</a><span>Table Caption</span></caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</div>
i hope it's helpfull
I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.
Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.
In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.
Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just zero.
table, tr, td {
border: 3px solid red;
}
tr.noBorder td {
border: 0;
}
<table>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr class="noBorder">
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>A3</td>
<td>A3</td>
</tr>
</table>
Here's the output as an image:
I use this with good results:
border-style:hidden;
It also works for:
border-right-style:hidden; /*if you want to hide just a border on a cell*/
Example:
<style type="text/css">
table, th, td {
border: 2px solid green;
}
tr.hide_right > td, td.hide_right{
border-right-style:hidden;
}
tr.hide_all > td, td.hide_all{
border-style:hidden;
}
}
</style>
<table>
<tr>
<td class="hide_right">11</td>
<td>12</td>
<td class="hide_all">13</td>
</tr>
<tr class="hide_right">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr class="hide_all">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
Here is the result:
Add programatically noborder class to specific row to hide it
<style>
.noborder
{
border:none;
}
</style>
<table>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
</tr>
/*no border for this row */
<tr class="noborder">
<td>content1</td>
<td>content2</td>
</tr>
</table>
You can simply add these lines of codes here to hide a row,
Either you can write border:0 or border-style:hidden; border: none or it will happen the same thing
<style type="text/css">
table, th, td {
border: 1px solid;
}
tr.hide_all > td, td.hide_all{
border: 0;
}
}
</style>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr class= hide_all>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
running these lines of codes can solve the problem easily