I want to print a table with double headlines on every page. On the first page it works well, but on the following pages it prints only the first headline.
css
#media print {
thead {
display: table-header-group;
}
}
Html for my table.
<tr>
<thead>
<th colspan="2">A</th>
<th>B</th>
<th>C</th>
<thead>
<th>1</th>
<th colspan="2">2</th>
<th>3</th>
</tr>
Thanks for help.
I try to add a class to the second thead and then group it in css instead of thead -> .className but it don't work. I had the same result.
Try this,
<thead>
<tr>
<th colspan="2">A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<th>1</th>
<th colspan="2">2</th>
<th>3</th>
</tr>
</thead>
Related
I have a screenshot as show below which I have replicated in Bootstrap 4.
In the screenshot, on row hover the background-color: #EDEDED; shows up.
Here is the fiddle for the above screenshot.
The HTML code which I have used in order to create the table is :
<div class="body-manage-attendees">
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Number</th>
<th scope="col">Table</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Amanda Doe</th>
<td>250</td>
<td>2</td>
<td>Bill</td>
</tr>
<tr>
<th scope="row">Andy Doe</th>
<td>14</td>
<td>1</td>
<td>Bill</td>
</tr>
<tr>
<th scope="row">Cameron Doe</th>
<td>250</td>
<td>4</td>
<td>No Bill</td>
</tr>
<tr>
<th scope="row">Dana Doe</th>
<td>53</td>
<td>5</td>
<td>Bill</td>
</tr>
<tr>
<th scope="row">Fred Doe</th>
<td>250</td>
<td>2</td>
<td>Bill</td>
</tr>
</tbody>
</table>
</div>
Problem Statement:
I am wondering what I need to add in the CSS so that on row hover, the background-color: #EDEDED; appears.
The bootstrap 3 class appears to still work. Try adding the hover class to your table.
<table class="table table-hover">
By doing so, this CSS class from bootstrap is applied:
.table-hover tbody tr:hover {
background-color: rgba(0,0,0,.075);
}
Feel free to override that class and change the color to whatever you wish!
Add .table-hover class to your table:
<table class="table table-hover">
Alterinatively you an also use CSS:
table.table tr:hover td, table.table tr:hover th {
background-color: #EDEDED;
}
Edit: updated JSFiddle
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'm using Bootstrap and have a table with the following structure and style:
<table class="table table-bordered">
<tr>
<th>Keyword</th>
<th>AdWords top</th>
<th>AdWords right</th>
<th>AdWords total</th>
<th>URLs of top AdWords</th>
<th>URLs of right AdWords</th>
<th>Non-Adwords results</th>
<th>Non-Adwords urls</th>
<th>Total links on page</th>
<th>Total SERP results</th>
<th>Cached SERP</th>
</tr>
....
However, when I'm printing out my data, it looks really ugly:
That is why I have several questions:
How to make a normal width of a column with a text inside <th> elements in order to fit the text inside the cell
How to make al the text inside <th> aligned by center
It seems like you are missing "thead". For bootstrap styles to correctly apply, you need to make sure you're html markup is correct.
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
Solved!
In SCSS file add a new custom class:
.withoutTransfer{
white-space: nowrap;
}
Then use it in table:
<thead>
<tr class="withoutTransfer">
....
</tr>
</thead>
Now the table headers looks pretty.
try this
setting widths for your table cells if you apply the rule 'table-layout: fixed' to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.
`table-layout: fixed; width: 100%`;
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.
I have an html table with one of the headers spanning over 2 columns. How can I add sub-headers to each of the 2 columns ?
For e.g. in the attached image, I want the 'Contact' column to have sub-headers 'Phone' and 'Address' for the respective columns.
The same way you would if you were drawing out the table on paper:
<table>
<thead>
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Email</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<!-- your data goes here -->
</tbody>
</table>
You need to have two separate header rows:
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Email</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Number</th>
<th>Address</th>
</tr>
Add another row and put sub headers in <td /> tags. Maybe give the row a class and style the td text? That way they won't look identical to the real headers, that might cause confusion.
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th colspan="2">Title 3</th>
</tr>
<tr>
<td>content</td><td>content</td><th>subtitle 1</th><th>subtitle 2</th>
</tr>
<tr>
<td>content</td><td>content</td><td>content</td><td>content</td>
</tr>
</table>