I have used table for display the list of records. It have lot of rows and columns. If I print this table the table heading display in first page. After the first page the headings are not display. I found many website from Google search. I have followed that method, but I could not achieve. I could not realize the mistake. This is my css.
<style type="text/css" media="print" >
table td {
border-bottom:1px solid gray;
}
th {
font-family:Arial;
color:black;
background-color:lightgrey;
}
thead {
display:table-header-group;
}
tbody {
display:table-row-group;
}
</style>
This my Html code:
<table border="0" cellpadding="2" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>First Name 1</td>
<td>Last Name 1</td>
</tr>
</tbody>
</table>
Anyone can help me? Thanks.
Try adding this in your CSS :
#media print
{
thead {display: table-header-group;}
}
Here is the sample
First, you have to explicitly define the table head and table body:
<table>
<thead>
<tr>
<th>First Heading</th>
<th>Second Heading</th>
<th>Third Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
. . .
<tr>
<td>fim</td>
<td>fam</td>
<td>fom</td>
</tr>
</tbody>
</table>
If you want printing to work, you need to have an explicit declaration. Next, you just need a single line of CSS to get things going:
#media print {
thead {display: table-header-group;}
}
This will force most browsers to repeat the contents of thead node on every printed page.
Related
Here's a link to the question
and here's my answer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spreadsheet</title>
<style>
td {
text-align: right;
width: 33%;
}
td, th, table {
border: 1px solid;
border-collapse: collapse;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<caption>Purchase Orders</caption>
</thead>
<tbody>
<tr>
<th>Order Date</th>
<th>SKU</th>
<th>Quantity</th>
</tr>
<tr>
<td>07-16-2018</td>
<td>523402</td>
<td>54</td>
</tr>
</tbody>
</table>
</body>
</html>
It comes out fine on my IDE but on the website is saying 3 of 4 test cases fail.
The site seems to be a little more strict here than to just check if it looks the same. To make the tests pass you need to:
Put the row containing the <th> tags between <thead></thead>.
Move the caption out of <thead>.
The correct code for the table would then look like this:
<table>
<caption>Purchase Orders</caption>
<thead>
<tr>
<th>Order Date</th>
<th>SKU</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>07-16-2018</td>
<td>523402</td>
<td>54</td>
</tr>
</tbody>
</table>
I want to display image next to each row in a table using Html and CSS.
Something like this image:
Images will be placed at the red cross position: on right side of each row and not created within extra column.
What would be the best way to do that.
You could try using the :last-child combined with the :after pseudo.
tr td:last-child::after {
content: '';
display: inline-block;
position: absolute;
height: 1em;
width: 1em;
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat center;
}
<table>
<thead>
<th>1</th>
<th>2</th>
</thead>
<tb>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tb>
</table>
Another column with a blank table header should do it.
<table style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th> </th> -- This is the blank space
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>Image goes here</td>
</tr>
</table>
You can always style it up to appear like it is not apart of the table.
Hello I'm trying to remove border from my table.
Here's my code :
<table class="table table-responsive" style="border:none">
<tr>
<th>First name</th>
<th>Last name </th>
</tr>
<tr>
<td>Tima</td>
<td>Zahra</td>
</tr>
<tr>
<td>Emily</td>
<td>SMITH</td>
</tr>
</table>
But it's not working. Please help me ! I'm sorry for my bad english and I hope you will understand it.
Just use following css:
.table thead tr th, .table tbody tr td {
border: none;
}
Just do following changes in head section
<style>
.borderless tr, .borderless td, .borderless th {
border: none !important;
}
</style>
and this changes in body section:
<table class="table table-responsive borderless">
<tr> <th>First name</th><th>Last name </th></tr>
<tr> <td>Tima</td> <td>Zahra</td> </tr>
<tr><td>Emily</td> <td>SMITH</td> </tr>
</table>
This will helpful to you. Thank you :)
Use the table-borderless bootstrap class. Note my table below has zebra stripes, but that is because I wanted them and has no impact on the table border. If you don't want stripes either, just remove table-striped.
<table class="table table-striped table-borderless">
<thead>
<tr>
<th scope="col">Pos</th>
<th scope="col">Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Adam</td>
</tr>
</tbody>
</table>
I have a html table with CSS. Currently all the cells have a white border around them, I am having trouble removing the column borders for each cell so the rows are divided by a white line. A similar table to what I'm trying to achive can be seen at http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/, look at example 3 (the top table in this example). So far my code looks like:
<html>
<head>
<style type="text/css">
table, td, th
{
font-family:calibri;
border:collapse:collapse;
}
th
{
background-color:#b9c9fe;
color:#006add;
}
td
{
background-color:#e8edff;
color:#666699;
}
</style>
<body>
<table cellpadding="5" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<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>
</body>
</html>
Looks like there's a slight error in the table style: it says border:collapse:collapse where it should be border-collapse: collapse;.
From there, you'll just need to add border-bottom: 1px solid #fff; to the table, th, td block, and you should be all set!
I have a matrix that I am showing in html table. I have my header row (th) but I am trying to see if there is such things as header column that I can style similar to header row. Right now I am using a class=odd and class=even on my TR in my Tbody so I am not sure if there is a way to have a column overwrite this row css logic.
Given this markup:
<table>
<thead>
<tr>
<th> </th>
<th>Field 1</th>
<th>Field 2</th>
</tr>
</thead>
<tbody>
<tr class="even">
<th>Row 1</th>
<td>Cell 1,1</td>
<td>Cell 2,1</td>
</tr>
<tr class="odd">
<th>Row 2</th>
<td>Cell 2,1</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>
You could use this CSS:
thead th {
background-color: red;
}
tr.even td {
background-color: blue;
}
tr.odd td {
background-color: yellow;
}
tbody tr.odd th, tbody tr.even th {
background-color: green;
}
See this in action here.
It might seem odd but try the <col> tag, you don't see it very often but I think it's great!
<table width="100%" border="1">
<col style="background:red;" align="left" />
<col align="left" />
<col align="right" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Of course you'd want to put a class on the <col> tag as opposed to writing the style right in there.
Also I'd combine this with the other folks answers when it comes to the CSS. As for using pseudo classes for even/odd, if you want to retain compatibility with IE6 you'll need to apply the striping with JavaScript, or your application code.
you can target a column using CSS td:first-child or make the header cells th instead of td and differentiate using thead th and tbody th