I am trying to add border-bottom to <tr> element of table as below but it is not working
<table>
<tr style="border-bottom: 1px solid black !important;">
it is working when I add the style to <td> but not on <tr>. Can you please let me know how to fix it?
Thanks
You cannot apply a border on tr element, you need to apply a border on td, or you need to use border-collapse for your table element
Demo (Applying border-bottom to td)
Demo 2 (Applying border-bottom to tr if used border-collapse)
table {
width: 100%;
border-collapse: collapse;
}
table tr { /* Use table tr td if not using border-collapse property */
border-bottom: 1px solid #eee;
}
Note: Avoid using inline styles, you will feel hard to change them
at certain point, also, avoid using !important unless required,
consider using more specific selectors instead
Related
I am trying to use css bootstrap framework in my project
I am using table with the following classes table table-bordered table-striped
I want to remove the borders from all the column except the first column.
Here is my table in a fiddler https://jsfiddle.net/8yf0v3xt/16/
Basically in this screenshot, I only want to remove the vertical borders in the red rectangle border.
<table class="table table-bordered table-striped">
<thead>
<tr><th></th><th></th>...</tr>
</thead>
<tbody>
<tr><th score="row"><th></td><td></td>...</tr>
...
</tbody>
</table>
EDITED
Or, if I remove the table-bordered class, how can I only add a column on the very first column? something like this screenshot
How can I do that?
You need to look into the :first-child pseudo selector. Link here
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
You can select all of the td elements and remove the border from them all with:
table tr td { border: none; }
And then to add unique styling to just the first element:
table tr td:first-child { border: default; } /* Or whatever styling you may wish..
The same can be done with :last-child which will of course select the last element in oppose to the first.
And if you need to be even more specific again.. You can use :nth-child(x) where x is the number of the element that you wanted.
Fiddle: https://jsfiddle.net/8yf0v3xt/18/
UPDATE
Fiddle: https://jsfiddle.net/8yf0v3xt/22/
I've removed the .table-bordered class and added the following CSS:
table { border: 1px solid #ddd; }
table.table tr, table.table tr th, table.table tr td { border: none; }
table.table tr th:first-child, table.table tr td:first-child { border: 1px solid #ddd; }
I have used the pseudo selectors like explained above to add styling to just the first column.
I want to change the background color of all td in a tr just using a class in the tr. I am using the following css
tr .yellow td{
background-color: yellow;
}
And I have following html
<tr class="yellow"><td></td> <td></td></tr>
But the background color is not changing. What is the mistake here?
You have a space before the class in your CSS declaration
tr.yellow td{
background-color: yellow;
}
You need to remove the space to indicate that the class is on the <tr> element. Without it you are suggesting that the hierarchy is:
tr, then something with a class of "yellow", then a td
e.g.
<tr>
<sometag class="yellow">
<td>
Which isn't what your DOM looks like.
It seems like some tables are inheriting styles that they shouldn't.
I have a custom table class, and I want only tables that use that class to have a 1px width solid border, but for some reason other tables seem to use it randomly.
Here's the CSS for it:
.my_custom_table td, th { border: 1px solid gray; }
and here's the markup for a table that uses it for some reason:
<table border="0" cellspacing="0" cellpadding="2" class="customer-info"> ... </table>
I'm thinking the style says "for all td and td under the class .my_custom_table - use 1px solid border", or am I missing something?
Your CSS will apply to all <th> tags, not just those under the my_custom_table class.
Try this instead:
.my_custom_table td, .my_custom_table th { border: 1px solid gray; }
.my_custom_table td, th means all the td elements in something with a my_custom_table class AND all of the th elements. Notice that's not all the th in something with a my_custom_table class. Just all the th.
.my_custom_table td, .my_custom_table th
is what you want.
I have created a page which is a login portal to three separate websites. On this page, I have displayed the three login portals to said websites. I am trying to style it all with css and as few classes as possible (I need to fine tune my css skills).
What I have created is a table with three rows and two columns called loginPortals:
<table class="loginPortals">
<tbody>
<tr>
<td>Picture 1</td>
<td>Login form 1</td>
</tr>
<tr>
<td>Picture 2</td>
<td>Login form 2</td>
</tr>
<tr>
<td>Picture 3</td>
<td>Login form 2</td>
</tr>
</tbody>
</table>
I've only just begun the styling of the table, so it's very incomplete, however I'm struggling already. This is simplified, because I don't know exactly how it's going to look. Basically though, I want a border of some sort appearing between each row. The following doesn't quite achieve this as I had wanted:
.loginPortals{
width:100%;
}
.loginPortals tbody:first-child td{
border-top:1px solid #000;
}
.loginPortals tbody tr td{
border-bottom:1px solid #000;
padding:1em 0;
}
The first-child selector isn't working as I had thought it would. It is applying the top border to all the cells in all the rows. This is causing the line thickness to double in the middle of the rows.
How do I fix this so that the top border is only applied to the top row without creating extra classes or applying any inline style.
Thank you!
Joe
Your table borders need to be set to collapse:
.loginPortals{
width:100%;
border-collapse: collapse;
}
You can then omit the :first-child rule and just apply top and bottom borders for all your rows:
.loginPortals tbody tr td{
border-top:1px solid #000;
border-bottom:1px solid #000;
padding:1em 0;
}
Also, just for your information, this selector:
.loginPortals tbody:first-child td
Means:
Select any td element
within a tbody
that is the first child of its parent.
And not:
Select any td element
within the first child of a tbody.
So since the tbody is the first and only child of .loginPortals, all the td elements in all their tr parents will be selected. See this answer for a visual explanation. You probably wanted this selector:
.loginPortals tbody tr:first-child td
But that's not necessary because all you have to do is collapse your table borders.
If I understand correctly, you have 3 forms and only want two lines - that's what I took from I want a border of some sort appearing between each row if that's the case, try this.
.loginPortals tr:first-child td{
border-top:none;
}
.loginPortals tbody tr td{
border-top:1px solid #000;
padding:1em 0;
}
http://jsfiddle.net/u4v3Z/
I believe this would work...
td {border-top:1px solid #000;}
First of all, if you want to improve your CSS skills you should immediately stop using tables for layout.
Second, the :first-child pseudo class affects elements that are the first child of their parents. So since you only have one tbody element and it is the first child of the table writing tbody or tbody:first-child will yield the same results.
Edit: I think what you might be after here is tr:first-child td (you only want the table cells in the first table row to have a top border).
To solve your problem you could just go with border-bottom on all tds, unless you need a border in the top as well in which case you could set that border on the actual table or you could give all the tds a border-top and border-bottom. This of course renders a double border as you describe, but you can make the borders of a table collapse using border-collapse: collapse.
So in short: table {border-collapse: collapse}. But don't use tables for layout.
I have a very simple html page:
<table>
<tr><th>header1</th><th>header2</th></tr>
<tr><td>item1</td><td>item2</td></tr>
<tr><td>item3</td><td>item4</td></tr>
</table>
With some simple css:
tr {
border:1px solid blue;
}
I would expect this to put a border around the trs but it doesn't put a border around it at all. How do I get a border around the tr?
Add table { border-collapse: collapse; }.
From the CSS2 specification:
In [the border-collapse: separate model], each cell has an individual border. [...] Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).
Your code works, if you want a border just on the row.
However, if you are looking to have the border everywhere, you will need to do this:
tr, td, th{
border:1px solid blue;
}
Example: http://jsfiddle.net/jasongennaro/83VjH/
Borders can be added to rows of table by adding border to <td> and <th> elements [This is basically a CSS trick to achieve (hack!) that as borders cannot be added to <tr> and <tbody> elements of table]. Add following styles to your CSS to get borders around rows or headers or table cells.
table {
border-collapse: collapse;
}
table td, table th {
border: solid white;
}
td {
border-color: red (just an example, can be as per your requirement);
}
Explanation:
border-collapse rule is added to whole table. It can have two other possible properties separate (default) and inherit. For their respective effects refer https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
Second rule i.e. adding border property to <td> (for data cells) and <th> (for header cells) is a must. If you don't add it, borders will not show up. In this rule border-color is white, it can be some other color of your choice instead of white. Basically, this rule will activate the borders around table cells and since the color is white nothing will show up.
And finally, add the color of your choice. This rule can be more specific to apply border to one <td> or a class of <td>.