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>
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
i have a table as follows
<table class="bordered">
<thead class="info">
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr></tbody></table>
i want to apply borders to to table whose thead class is info
css currently contains
.bordered td{
border: 1px solid #0060a0 !important;
}
You can do this using a sibling selector
.bordered thead.info + tbody td
This selector targets all td elements within a tbody element which is an adjacent sibling to a thead.info element within a .bordered table. That sounds confusing, so here's a demo:
.bordered thead.info + tbody td {
border: 1px solid #0060a0;
}
<table class="bordered">
<thead class="info">
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
A slightly more robust solution, which would be required if the table contained a tfoot element would be to use the more general sibling selector.
.bordered thead.info ~ tbody td {
border: 1px solid #0060a0;
}
<table class="bordered">
<thead class="info">
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</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 use Richfaces and have a rich:datatable with nested rich:tooltip-s.
You can imagine the generated HTML looks like this:
<table style="width: 400px; border: 3px solid #000; caption-side: bottom; border-collapse:collapse;">
<caption align="bottom">Table 1.1: A record of the fur shed annually by Jennifer's dog Shasta</caption>
<thead>
<tr>
<th>Month</th>
<th>Fur Shed (mm)</th>
</tr>
<thead>
<tbody style="background-color: #ff3;">
<tr>
<td>April</td>
<td>20</td>
</tr>
<tr>
<td>May</td>
<td>19</td>
</tr>
<tr>
<td>June</td>
<td>10</td>
</tr>
<tr>
<td>July</td>
<td>6</td>
</tr>
<tr>
<td>August</td>
<td>8</td>
</tr>
<tr>
<td>September</td>
<td>14</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="display:none;">
<script type="text/javascript">
new RichFaces.ui.DataTable("form1:table1:0:j_idt227",{"ajaxEventOptions":{}} )
</script>
</td>
</tr>
The problem with this html is in the 2nd (generated from RF) tbody: td has style="display:none;" and in Google Chrome this causes the bottom border being not shown.
My question is: do you know if it is possible to find a workaround to fix this? Moving the display:none; at tr or tbody level would already be a solution.
Thanks!
You can add a footer to the table (<f:facet name="footer">) which will render under the hidden row but if you don't want to you can use this CSS:
table > tbody > tr:last-child {
border-bottom: 3px solid #000;
}
this will find the last row and add a border at the bottom, of course this will affect every table on your page so you should use some identifiers. Also note that the :last-child selector may not be supported by all browsers (it does work in Chrome).
Other alternative is to wrap the table in a div but you'd need to play a little with the CSS to make it look the way you want.
For this Bootstrap styled table, I want the three columns (Sub1, Sub2, Sub3) widths to grow and align with their corresponding columns in the nested table.
http://jsfiddle.net/jamesholcomb/r55Zc/
Instead of using a nested <table>, simply use the rowspan attribute on the first column. Borders (and some padding) can be removed with some creative CSS (example):
CSS
th { text-align: center; }
tbody td {
border-width: 0 !important;
padding-top:0 !important;
}
tbody tr th ~ td {
border-top-width: 1px !important;
padding-top:8px !important;
}
tbody tr td:first-of-type {
border-left-width: 1px !important;
}
HTML
<div class="row">
<div class="span*">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="3">Col1</th>
</tr>
<tr>
<th></th>
<th>Sub1</th>
<th>Sub2</th>
<th>Sub3</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">Row1</th>
<td>[-01234543333545]</td>
<td>[4567]</td>
<td>[1]</td>
</tr>
<tr>
<td>[1]</td>
<td>[456.789]</td>
<td>[2]</td>
</tr>
<tr>
<td>[0]</td>
<td>[1]</td>
<td>[0000789.0123]</td>
</tr>
</tbody>
</table>
</div>
</div>
If you want the entire row to highlight correctly, I suggest you tweak your table as others have suggested. However, instead of creating multiple trs and giving the td a rowspan of 3 (which causes row highlighting problems), just list the data in the td as an unordered list and make some adjustments to the css.
Table:
<div class="row">
<div class="span*">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="3">Col1</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Sub1</td>
<td>Sub2</td>
<td>Sub3</td>
</tr>
<tr>
<td>Row1</td>
<td><ul><li>[-01234543333545]</li><li>[1]</li><li>[0]</li></ul></td>
<td><ul><li>[4567]</li><li>[456.789]</li><li>[1]</li></ul></td>
<td><ul><li>[1]</li><li>[2]</li><li>[0000789.0123]</li></ul></td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
td > ul {
list-style-type:none;
margin:0;
}
Here is the updated fiddle forked from #Mr.Alien's suggestions.