I applied the below table border to all of the tables on my site
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th, td{
border: 1px solid #999;
How do I do no border on some of the tables while keeping the border on the others?
You can target elements with a specific class or id to style:
#tableOne {
border: none;
}
.borderlessTable {
border: none;
}
Alternatively you could do it the other way around and add the border to tables with a specific class/id.
Related
I was never any good with CSS, and it's after midnight here, so apologies if this question is too basic.
My table looks like this:
using this CSS:
.zebra_stripe_table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
tbody.zebra_stripe_table
{
border-collapse: collapse;
border: 1px solid #ddd;
}
tr.zebra_stripe_table th.zebra_stripe_table td.zebra_stripe_table {
text-align: center;
/* padding: 16px; */
border: 1px solid #ddd;
}
.zebra_stripe_table tr:nth-child(even) {
background-color: #f2f2f2;
}
I would prefer to have vertical columns on the table, like this:
which I achieved with
.zebra_stripe_table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
.zebra_stripe_table tbody
{
border-collapse: collapse;
border: 1px solid ddd;
}
.zebra_stripe_table tr, th, td {
text-align: center;
/* padding: 16px; */
border: 1px solid #ddd;
}
.zebra_stripe_table tr:nth-child(even) {
background-color: #f2f2f2;
}
The difference being changing
tr.zebra_stripe_table th.zebra_stripe_table td.zebra_stripe_table
to
.zebra_stripe_table tr, th, td
but, that adds cell border to the only other table in the AngularJS project (which does not have the class "zebra_stripe_table").
So, I imagine that the first syntax is correct, applying a style to tr, th & td only of the class zebra_stripe_table.
Question, how do I get those vertical stripes with it?
For the center alignment inside the cells change this selector
.zebra_stripe_table tr, th, td { ... }
to this:
.zebra_stripe_table th, .zebra_stripe_table td {... }
(You don't need to include the tr here, but you need to have .zebra_stripe_table as a parent for * both* th and td)
About the alternating background color for the rows, change your last CSS rule from
.zebra_stripe_table tr:nth-child(even) { background-color: #f2f2f2; }
to
.zebra_stripe_table tr:nth-child(even) td { background-color: #f2f2f2; }
(It's the cells which get the background, not the rows)
I have defined nested table where parent table don't let to defined new styles for child table.
Some places in nested table I want to hide left and right cell border.
I have tried border-left-style:none !important; border-right-style:none !important; for td of child table but it not works.
Edited:
For parent table styles as
table tr td {
border: 0.1px solid black;
border-collapse: collapse;
font-size: 14px;
height:21px;
padding-left:4px;
}
for child table styles as
table tr td table tr td {
border: 1px solid black;
font-size: small;
border-collapse: collapse;
}
table tr td table .btlPropertyAddress td{
border-left-style:none !important;
border-right-style:none !important;
}
Where btlPropertyAddress added class to child table.
I'd like to set a background and a rounded border on a <tbody/>, such as
tbody { border-radius: 15px; border: 1px solid black; background: #ccf; }
However, when I try this in Codepen, the border and background color display, but the <tbody/> still has square corners.
I'm able to work around this problem using a series of :last-child and :first-child selectors to apply the radius to individual tds on the corners, as for example
tbody tr:first-child td:first-child { border-top-left-radius: 15px; }
This version does what I want (at least, under firefox) but also feels extremely verbose and hacky, a problem that'll only get worse when I add the prefixed versions for compatibility (-moz-, -webkit- etc), and support for <th/> elements in addition to <td/>. Is there a succinct, pure-css way of getting this behavior?
Assuming you have collapsed the borders in the table, simply set display:block on the tbody and apply the border-radius.
Codepen example
CSS
table {
width: 100%;
border-collapse: collapse;
display: block;
width: 600px;
}
tbody {
background: #ccf;
border: 1px solid black;
border-radius: 15px;
display: block;
}
th, td {
width: 200px;
}
td, th {
padding: 5px;
text-align: center;
}
I want to use CSS to set a color of the outer border of the table ...
Then the inner cells would have different border color ...
I created something like this :
table {
border-collapse:collapse;
border: 1px solid black;
}
table td {
border: 1px solid red;
}
Problem is, the table's color change and become red as you can see here : http://jsfiddle.net/JaF5h/
If the border width of the table is increased to be 2px it will work : http://jsfiddle.net/rYCrp/
I've been dealing with CSS and cross browsers issues for so long ... This is the first time I face something like that and I am totally stuck ... No idea what to do!
Any one knows how to get that fixed with border-width:1px ?
I would acheive this by using adjacent selectors, like so:
table {
border: 1px solid #000;
}
tr {
border-top: 1px solid #000;
}
tr + tr {
border-top: 1px solid red;
}
td {
border-left: 1px solid #000;
}
td + td {
border-left: 1px solid red;
}
It's a little bit repetitive, but it acheives the effect you're after by setting the top and left borders of the first row and column respectively, then overwriting the 'internal' rows and cells with red.
This won't of course work in IE6 as it doesn't understand the adjacent selectors.
http://jsfiddle.net/JaF5h/36/
Try this:
tbody { display:block; margin: -1px; }
The previous answers didn't fully resolve this for me. The accepted answer allows the internal borders to overlap the outer table border. After some experimentation I came up with the following solution.
By setting the table collapse style to separate the internal borders do not overlap the outer. From there the extra and doubled borders are eliminated.
HTML:
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
CSS
table {
border: 1px solid black;
border-collapse: separate;
border-spacing: 0;
}
table td, table th {
border: 1px solid red;
}
table tr td {
border-right: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td{
border-top: 0;
}
https://jsfiddle.net/o5ar81xg/
Create a div surrounding your table. Set the div border color for the outside of your table. DO NOT border-collapse your table. Instead, let your cells separate to show the (inner borders) background color of the div beneath. Then set the background cells to the background color of your choice.
HTML:
<div id="tableDiv">
<table id="studentInformationTable">
<!-- Add your rows, headers, and cells here -->
</table>
</div>
CSS:
#tableDiv {
margin-left: 40px;
margin-right: 40px;
border: 2px solid brown;
background-color: white;
}
table {
position: relative;
width: 100%;
margin-left: auto;
margin-right: auto;
border-color: brown;
}
td, th {
background-color: #e7e1d3;
padding: 10px 25px 10px 25px;
margin: 0px;
}
Try the following it worked for me:
table {
border-collapse: collapse;
border: solid #000;
}
table td {
border: 1px solid red;
}
I have a grid control and I'm setting a style for it.
In the border of cells, I want one pixel around each cell, but it appears two pixel because one from the left and one from the right.
The CSS:
.RadGrid_MyCustomSkin .rgRow td, .RadGrid_MyCustomSkin .rgAltRow td
{
border: 1px solid #F0D88C;
}
Any help !!
Use the border-collapse property.
give to td and table like this
table, td
{
border-color: #F0D88C;
border-style: solid;
}
table
{
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
}
td
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
}
You can set a border for one side only, maybe this will point you in the right direction :)
.RadGrid_MyCustomSkin .rgRow td, .RadGrid_MyCustomSkin .rgAltRow td
{
border-left/*or -right*/: 1px solid #F0D88C;
}