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>
I'm kinda stuck with a CSS problem while using Bootstrap. I'm also using Angular JS with Angular UI.bootstrap (which might be part of the problem).
I'm making a website that displays data in a table.
Sometime, the data contains object that I have to display in tables.
So I want to put borderless tables inside a normal table while keeping inside separation lines for the borderless tables.
But it seems that even if I specifically say to not show the borders on a table, it is forced:
HTML:
<table class='table borderless'>
CSS:
.borderless table {
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom-style: none;
}
So here, what I want is just the inside borders.
Using Bootstrap 3.2.0 I had problem with Brett Henderson solution (borders were always there), so I improved it:
HTML
<table class="table table-borderless">
CSS
.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
border: none;
}
The border styling is set on the td elements.
html:
<table class='table borderless'>
css:
.borderless td, .borderless th {
border: none;
}
Update: Since Bootstrap 4.1 you can use .table-borderless to remove the border.
https://getbootstrap.com/docs/4.1/content/tables/#borderless-table
similar to the rest, but more specific:
table.borderless td,table.borderless th{
border: none !important;
}
Don’t add the .table class to your <table> tag. From the Bootstrap docs on tables:
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
Since Bootstrap v4.1 you can add table-borderless to your table, see official documentation:
<table class='table table-borderless'>
Install bootstrap either with npm or cdn link
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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 colspan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
get the reference with this link
In my CSS:
.borderless tr td {
border: none !important;
padding: 0px !important;
}
In my directive:
<table class='table borderless'>
<tr class='borderless' ....>
I didn't put the 'borderless' for the td element.
Tested and it worked!
All the borders and paddings are completely stripped off.
I expanded the Bootstrap table styles as Davide Pastore did, but with that method the styles are applied to all child tables as well, and they don't apply to the footer.
A better solution would be imitating the core Bootstrap table styles, but with your new class:
.table-borderless>thead>tr>th
.table-borderless>thead>tr>td
.table-borderless>tbody>tr>th
.table-borderless>tbody>tr>td
.table-borderless>tfoot>tr>th
.table-borderless>tfoot>tr>td {
border: none;
}
Then when you use <table class='table table-borderless'> only the specific table with the class will be bordered, not any table in the tree.
Try this:
<table class='borderless'>
CSS
.borderless {
border:none;
}
Note: What you were doing before was not working because your css code was targeting a table within your .borderless table (which probably didn't exist)
I know this is an old thread and that you've picked an answer, but I thought I'd post this as it is relevant for anyone else that is currently looking.
There is no reason to create new CSS rules, simply undo the current rules and the borders will disappear.
.table>tbody>tr>th,
.table>tbody>tr>td {
border-top: 0;
}
going forward, anything styled with
.table
will show no borders.
Use the border- class from Boostrap 4
<td class="border-0"></td>
or
<table class='table border-0'></table>
Be sure to end the class input with the last change you want to do.
Use hidden instead of none:
.hide-bottom {
border-bottom-style: hidden;
}
This one worked for me.
<td style="border-top: none;">;
The key is you need to add border-top to the <td>
I'm late to the game here but FWIW: adding .table-bordered to a .table just wraps the table with a border, albeit by adding a full border to every cell.
But removing .table-bordered still leaves the rule lines. It's a semantic issue, but in keeping with BS3+ nomenclature I've used this set of overrides:
.table.table-unruled>tbody>tr>td,
.table.table-unruled>tbody>tr>th {
border-top: 0 none transparent;
border-bottom: 0 none transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-5">
.table
<table class="table">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tbody>
<tfoot>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</tfoot>
</table>
</div>
<div class="col-xs-5 col-xs-offset-1">
<table class="table table-bordered">
.table .table-bordered
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tbody>
<tfoot>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<table class="table table-unruled">
.table .table-unruled
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tbody>
<tfoot>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</tfoot>
</table>
</div>
<div class="col-xs-5 col-xs-offset-1">
<table class="table table-bordered table-unruled">
.table .table-bordered .table-unruled
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tbody>
<tfoot>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
Most examples seem to be too specific and/or bloated.
Here was my trimmed down solution using Bootstrap 4.0.0 (4.1 includes .table-borderless but still alpha)...
.table-borderless th{border:0;}
.table-borderless td{border:0;}
Similar to many proposed solutions, but minimal bytes 😉
Note: Ended up here because I was viewing BS4.1 references and couldn't figure out why .table-borderless was not working with my 4.0 sources (eg: operator error, duh) 💩
In some cases, one must also use border-spacing in the table class, like:
border-spacing: 0 !important;
Bootstrap supports scss, and he has a special variables. If this is a case then you can add in your main variables.scss file
$table-border-width: 0;
More info here https://github.com/twbs/bootstrap/blob/6ffb0b48e455430f8a5359ed689ad64c1143fac2/scss/_variables.scss#L347-L380
Mi solucion fue esta:
<table width="100%" border='0'>
<tr align='center'>
<td>Data1</td>
<td>Data2</td>
</tr>
</table>
i have a HTML table in which i want to make 1st Row fixed while i scroll, I'm able to make fixed Header Row but i also wanted my 1st Row of my table also be stay fixed. Its been 2 days I'm trying' with no success. Anybody out there had run into this kind a problem ?
<table>
<thead>
<tr>
<th>Header 1</th><th>Header 2</th> // this i have fixed already
</tr>
</thead>
<tbody>
<tr>....</tr> // this row i want to make fixed while i scroll.
<tr>....</tr>
</tbody>
</table>
JSFiddle till now i'hv got this from net
Table can have more than one tbody elements, so you can add this fixed row to first tbody, and rest rows to the second tbody. Then is just some play with css to set it right.
Working demo: http://jsfiddle.net/sMMZ9/4/
Demo is based on this solution
You need to insert first row inside the <thead> element and apply the same css as you have applied for th element:-
<thead class="fixedHeader">
<tr class="alternateRow">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
</thead>
CSS
html > body thead.fixedHeader td {
width: 200px;
}
You can also add border as per your design.Hope it'll help you for sure.
How's this:
.scrollContent > tr:first-child{
position: fixed;
}
Hi all it's been a while since I've asked something, this is something that has been bothering me for a while, the question itself is in the title:
What's your preferred way of writing HTML tables that have vertical headers?
By vertical header I mean that the table has the header (<th>) tag on the left side (generally)
Header 1 data data data
Header 2 data data data
Header 3 data data data
They look like this, so far I've come up with two options
First Option
<table id="vertical-1">
<caption>First Way</caption>
<tr>
<th>Header 1</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
</table>
The main advantage of this way is that you have the headers right (actually left) next to the data it represents, what I don't like however is that the <thead>, <tbody> and <tfoot> tags are missing, and there's no way to include them without breaking the nicelly placed together elements, which lead me to the second option.
Second Option
<style type="text/css">
#vertical-2 thead,#vertical-2 tbody{
display:inline-block;
}
</style>
<table id="vertical-2">
<caption>Second Way</caption>
<thead>
<tr>
<th colspan="3">Header 1</th>
</tr>
<tr>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th colspan="3">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Footer</td>
</tr>
</tfoot>
</table>
The main advantage here is that you have a fully descriptive html table, the drawbacks are that proper representation needs a bit of CSS for the tbody and thead tags and that the relation between the headers and data isn't very clear as I had my doubts when creating the markup.
So, both ways render the table how it should, here a pitcure:
With the headers on the left or right side if you would prefer it, so, any suggestions, alternatives, browser issues?
First, your second option isn't quite valid HTML in the sense that all of the rows (TR) in a table should contain an equal number of columns (TD). Your header has 1 while the body has 3. You should use the colspan attribute to fix that.
Reference: "The THEAD, TFOOT, and TBODY sections must contain the same number of columns." - Last paragraph of section 11.2.3.
With that being said, the first option is the better approach in my opinion because it's readable regardless of whether or not I have CSS enabled. Some browsers (or search engine crawlers) don't do CSS and as such, it'll make your data make no sense as the header will then represent columns instead of rows.
The First Option... I think it is the better and simple approach..
Honestly, option 1. I would suggest you to look at this example from W3.org(link below). I think this method is the best, because this way your headings will also be interpreted right on screen readers.
https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only
If you want to show a data-bound control element (like asp repeater) in your table, then first option won't be possible. Second option can be used as follows.
<asp:Repeater ID="hours" runat="server">
<HeaderTemplate>
<table id="vertical-table">
<thead>
<tr>
<th colspan="0">hours:</th>
</tr>
<tr>
<th colspan="1">Monday</th>
</tr>
<tr>
<th colspan="1">Tuesday</th>
</tr>
<tr>
<th colspan="1">Wednesday</th>
</tr>
<tr>
<th colspan="1">Thursday</th>
</tr>
<tr>
<th colspan="1">Friday</th>
</tr>
<tr>
<th colspan="1">Saturday</th>
</tr>
<tr>
<th colspan="1">Sunday</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Container.DataItem %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
div.vertical {
margin-left: -85px;
position: absolute;
width: 215px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
/* Safari/Chrome */
-moz-transform: rotate(-90deg);
/* Firefox */
-o-transform: rotate(-90deg);
/* Opera */
-ms-transform: rotate(-90deg);
/* IE 9 */
}
th.vertical {
height: 220px;
line-height: 14px;
padding-bottom: 20px;
text-align: left;
}
<table>
<thead>
<tr>
<th class="vertical">
<div class="vertical">Really long and complex title 1</div>
</th>
<th class="vertical">
<div class="vertical">Really long and complex title 2</div>
</th>
<th class="vertical">
<div class="vertical">Really long and complex title 3</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>a, b, c</td>
<td>1, 2, 3</td>
</tr>
</tbody>
</table>
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