I want to use a bootstrap 3 table with borders, eg using class="table table-bordered", so that I'll have borders between cells, but I don't want any borders on the outsides of the table.
I tried the following, and it seems to work well for the sides, but I can't think of a nice way to handle the potential top and bottom borders considering that thead and tfoot are optional elements. I was hoping to make something robust that would account for these scenarios, maximizing resuse potential.
.table-bordered.no-outside-borders {
border: none;
}
.table-bordered.no-outside-borders>thead>tr>td:first-child,
.table-bordered.no-outside-borders>thead>tr>th:first-child,
.table-bordered.no-outside-borders>tfoot>tr>td:first-child,
.table-bordered.no-outside-borders>tfoot>tr>td:first-child,
.table-bordered.no-outside-borders>tbody>tr>td:first-child,
.table-bordered.no-outside-borders>tbody>tr>th:first-child {
border-left: none;
}
.table-bordered.no-outside-borders>thead>tr>td:last-child,
.table-bordered.no-outside-borders>thead>tr>th:last-child,
.table-bordered.no-outside-borders>tfoot>tr>td:last-child,
.table-bordered.no-outside-borders>tfoot>tr>th:last-child,
.table-bordered.no-outside-borders>tbody>tr>td:last-child,
.table-bordered.no-outside-borders>tbody>tr>th:last-child {
border-right: none;
}
Is there a nice css solution here?
I had the same problem yesterday, the css code I used for this was:
.table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th {
border: none;
max-height: 200px;
font-size: 20px;
border-right: 1px solid gray;
border-collapse: collapse;
}
.table.table-borderless {
border-right: 1px solid gray;
border-collapse: collapse;
max-height: 200px;
font-size: 20px;
}
Related
I have a really annoying and baffling problem. My website has two different classes of table. One has no border and the other does. But no matter what I do, I cannot separate the th and td styling from the other table.
The first table has no class styling; I default to whatever.
The second table has:
table.t01, th, td {
border: 4px solid black;
border-collapse: collapse;
}
However, this affects the styling of th and td for the first table. WTF.
How can I solve this problem?
By using commas in your selector, you're saying "this style applies to any table with class t01, but also ANY th and ANY td."
This can be useful to consolidate the styling of many elements that have the same style. For example, the following are equivalent:
// The verbose way
th { color: red; }
td { color: red; }
p.red { color: red; }
div#firstred { color: red; }
// The concise way
th, td, p.red, div#firstred { color: red; }
If what you really looking for is to define a style for th and td descendants of a table with class t01, just separate the terms of the table and th/td selectors with a space:
Try:
table.t01 th, table.t01 td {
border: 4px solid black;
border-collapse: collapse;
}
What happens if you apply the styling to your selectors more explicitly (see below):
table.t01, table.t01 th, table.t01 td {
border: 4px solid black;
border-collapse: collapse;
}
Here's another, slightly shorter alternative:
<style>
#myTable th, td {
border: 4px solid black;
border-collapse: collapse;
}
</style>
...
<table id="myTable">
...
</table>
I'm trying to get the table in html fully copied from browser (works in Chrome) to Word document. What happens is that last row's border doesn't get passed in Word.
Take the code:
HTML:
<table id="t6">
<tr><th></th><th>raw_alpha</th><th>std.alpha</th><th>G6(smc)</th><th>average_r</th></tr>
<tr><td>gse1</td><td>0.88</td><td>0.88</td><td>0.88</td><td>0.45</td></tr>
<tr><td>gse10</td><td>0.88</td><td>0.88</td><td>0.88</td><td>0.45</td></tr>
</table>
CSS:
table, th, tr, td {
background-color:white;
border-spacing: 0;
padding: 2px 6px;
border-collapse:collapse;
text-align: right;
}
th {
background-color: white;
color: black;
border-width:1px;
border-color: #000;
border-style: solid none solid none;
}
tr:last-child {
border: 1px solid #000;
border-style: none none solid none;
}
Is there any way to make the last row's border be included? Also is there a possibility for this to work in Firefox?
Borders applied to tr elements are apparently not recognized, so you need to apply them to td instead.
In your CSS, change tr:last-child to tr:last-child td and it should work.
I had create table with help of bootstrap css. I want to remove padding of cell and bordercolor black to whole table only with bootstrap css. I don't want to create my own css.Only from boot strap classes I want to remove padding and provide border color black to whole table.
Thanx in advance.
plz help me.....
You can overwrite the class rule by adding !important attribute to desired property
like
.table{padding:0 !important}
.table-bordered td {
border: 1px solid #ddd !important;
}
.table tfoot > tr > td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.table thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #dddddd;
}
I am trying to create a table that has rounded top borders on either side, but the rest of the table's borders are squared.
When I apply this CSS the border remain squared, but the background-color does get rounded off, which creates a weird look:
table {border-collapse:collapse}
th {border-top:1px solid red; width:70px}
th, td {text-align:left; background-color:#cccccc}
th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px}
th.header2 {border-top:1px solid red; border-right:1px solid red; border-top-right-radius:20px}
The result is this:
How do I 'round' the borders in the top left/right header cells please so that the red border follows the background?
Please see the JSFiddle for a working example.
This is because border collapsed with:
CSS
table {
border-collapse: collapse;
}
Look at quick fix.
change:
table {
border-collapse: collapse;
}
to:
table {
border-collapse: separate;
border-spacing: 0px 0px;
}
DEMO
It can be solved rather simply by assigning the border properties only to the table tag instead of assigning them to the th tag and td tag.
table {
background: #ccc;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-top: 1px solid red;
}
th {
width: 70px;
}
th, td {
text-align: left;
}
http://jsfiddle.net/Tomer123/z5832/9/
Use the code in this way:
table {border:collapse;}
th {border-top:1px solid red; width:70px}
th, td {text-align:left; background-color:#cccccc}
th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px}
is there any way to apply to a table cells' both the separate and the collapsed border properties to have collapsed but separated? Thanks
EDIT: this is the wanted result:
Perhaps
table {
border-spacing: 1px 0;
}
The closest I can get is:
table {
border-collapse: separate;
border-spacing: 4px 0;
}
table td, table th {
border: 1px solid black;
}
Unfortunately, this will create a double-thick line between the rows. Negative values are not allowed in the border-spacing property, otherwise -1px would probably work.
You could make the other lines 2px wide if that is acceptable, then at least you wouldn't have differing border thicknesses:
table {
border-collapse: separate;
border-spacing: 4px 0;
}
table td, table th {
border-width: 1px 2px;
border-style: solid;
border-color: black;
}
table tr:first-child th,
table tr:first-child td {
border-top-width: 2px;
}
table tr:last-child th,
table tr:last-child td {
border-bottom-width: 2px;
}
This can be achieved without using extra div elements in the th & td cells. This solution works in Chrome, Firefox and IE8+.
CSS
table
{
border-collapse: separate;
border-spacing: 10px 0px;
}
td, th
{
padding: 10px;
border: 1px solid #000;
border-top: none;
}
table tr:first-child th
{
border-top: 1px solid #000;
}
Change table tr:first-child th to table tr:first-child td if the table's first row doesn't contain table header cells (TH).
See my jsfiddle here: Table with column spacing but collapsed row border
No, the border-collapse does not allow for separate defining of the horizontal and vertical. You can achieve it with extra markup (which, on a table, could end up being a lot of extra markup), so I don't advise it, but I will give the code for it:
Html:
<table>
<tr>
<th><div>Header 1</div></th>
<th><div>Header 2</div></th>
</tr>
<tr>
<td><div>Content 1</div></td>
<td><div>Content 2</div></td>
</tr>
<tr>
<td><div>Content 3</div></td>
<td><div>Content 4</div></td>
</tr>
</table>
And css:
table {border-collapse: collapse;}
th, td { border: 0; padding: 0;}
th div, td div {margin: 5px 0 0; border: 1px solid #ff0000; padding: 5px;}
Of course, you may want to use a class on the div or a child selector, some way of only targeting the div if you might have other div's in the table data. The margin controls your horizontal gap, and of course, your padding or border width can be whatever you want.
Is this what you're looking for?
table {
border: 1px solid black;
}
table td {
border: 1px solid red;
margin: 3px;
}
It doesn't use the border-collapse property, but it creates an outer table border with each <td> in its own separate border.